在一个动态水平菜单下居中放置一个静态宽度的垂直子菜单

Question

我已经在这个小时了。我可以找到我想要的单个组件，但我似乎无法将它们放在一起。

我遇到的问题是我无法获得静态宽度子菜单，以它们派生自的li项为中心。这应该很容易，如果那些父李项目有静态宽度，但我想动态改变他们的宽度根据页面的宽度。我不知道这是否令人满意，但这是我想要做的事情，并且不想静态化。我会将宽度设置为100％，但当页面变得非常宽时（我之所以选择它们是静态的），它们往往看起来很愚蠢（我之所以选择它们是静态的原因）

我确信还有其他更改我应该对css结构以及使它更好，所以如果你有任何提示，请把它们扔给我！

这就是我所拥有的。

的jsfiddle：http://jsfiddle.net/ede2gsc6/

的HTML：

<ul id="top-menu"> 
    <li>ITEM1</li> 
    <li>ITEM2 
     <ul> 
      <li>SUBITEM1</li> 
      <li>SUBITEM2</li> 
     </ul> 
    </li> 
    <li>ITEM3 
     <ul > 
      <li>SUBITEM1</li> 
      <li>SUBITEM2</li> 
      <li>SUBITEM3</li> 
     </ul> 
    </li> 
    <li>ITEM4</li> 
    <li>ITEM5 
     <ul> 
      <li>SUBITEM1</li> 
      <li>SUBITEM2</li> 
      <li>SUBITEM3</li> 
      <li>SUBITEM4</li> 
      <li>SUBITEM5</li> 
     </ul> 
    </li> 
</ul> 

和CSS：

body, ul { 
    margin: 0; 
    padding: 0; 
} 


#top-menu{ 
    float: left; 
    width:100%; 
    background-color: rgba(0,240,255,.5); 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    text-align: center; 
    padding: 0px; 
    margin: 0px; 
    min-width: 620px; 
    list-style: none; 
} 
     #top-menu li { 
      float: left; 
      position: relative; 
      width: 20%; 
      list-style: none; 
     } 
     #top-menu a:hover { 
      color: #00F0FF; 
     } 
      #top-menu li ul { 
       padding-top: 1px;  
       position: absolute; 
       background: rgba(0,240,255,.5); 
       border-bottom: 1px solid black; 
       border-left: 1px solid black; 
       border-right: 1px solid black; 
       visibility: hidden; 
       width: 170px; 
      } 
      #top-menu li:hover ul { 
       visibility: visible; 
       display: block; 
      } 
       #top-menu li ul li { 
        float: left; 
        padding: 0px; 
        width: 100%; 
        text-align: left; 
       } 

Answer 1

你可以使用

left: 50%; 
margin-left: -85px; 

你#nav li ul生成中心的定位。工作示例：http://jsfiddle.net/ede2gsc6/3/

Answer 2

如果您计划使这个多一点活力，你不妨使用类如反对id的。

下面是一个有你需要的类的例子。 http://jsfiddle.net/54n1r96e/1/

<ul class="nav"> 
<li>ITEM1</li> 
<li>ITEM2 
    <ul class="dropdown"> 
     <li>SUBITEM1</li> 
     <li>SUBITEM2</li> 
    </ul> 
</li> 
<li>ITEM3 
    <ul class="dropdown"> 
     <li>SUBITEM1</li> 
     <li>SUBITEM2</li> 
    </ul> 
</li> 
<li>ITEM4</li> 
<li>ITEM5 
    <ul class="dropdown"> 
     <li>SUBITEM1</li> 
     <li>SUBITEM2</li> 
    </ul> 
</li> 

Answer 3

我设法使它工作。

• 我通过应用50％的保证金将ul-item 50％移到右边。因此，ul会在ITEM1，ITEM2等中途开始（取消小提琴边框中的边框，如果您想查看它的位置）
• 之后，我将其ul宽度的50％内的项目移动到 左侧。这意味着li的中间现在位于 ul的左侧。所以li项目居中
• 使用宽度：在子项目的li项目上的100％将给所有这些项目相同的宽度（最长菜单项目的项目）
• 其余全部与样式li-items使它们显示为通常围绕它们的ul。

退房的JSFiddle看到的结果，并阅读代码中的注释。这里是我添加/修改的代码：

  #top-menu li ul { 
       padding-top: 1px; 
       margin-left: 50%; 
       position: absolute; 
       background: rgba(0,240,255,.5); 
       /*border-bottom: 1px solid black; 
       border-left: 1px solid black; 
       border-right: 1px solid black;*/ /*remove comment tags if you want to see where the actual ul is*/ 
       visibility: hidden; 
       width: auto;/*set width to fit content*/ 
       background-color: transparent; 
      } 
      #top-menu li:hover ul { 
       visibility: visible; 
       display: block; 
      } 
       #top-menu li ul li { 
        float: left; 
        padding: 5px 5px; 
        width: 100%;/*set width to the longest item in li so all li items have equal width*/ 
        clear: both; 
        text-align: left; 
        border-right: 1px solid red; 
        border-left: 1px solid red; 
        margin-left: calc(-50% - 6px);/*unfortunately a calc function is needed here because adding padding/borders to the left moves the entire block to the right.*/ 
        margin-top: -1px;/*solves issue of submenu disappearing when hovering over border*/ 
        background-color: purple; 
       } 
#top-menu li ul li:last-child{ 
    border-bottom: 1px solid red;/*add border to the bottom of the last li-item*/ 

}