1

我需要创建一个水平 css 下拉菜单，其中最右边的下拉列表右对齐而不是左对齐。

假设子 UL LI 比父 LI 长，它们将与父 LI 左对齐，而如果子 UL 的右边缘流过父 UL（菜单容器）的右边界，则子 UL 向右对齐父 LI 的边缘。

用例：具有 100% 屏幕宽度的流畅页面布局——不能有下拉菜单强制水平滚动。

例如

<ul id="menu">
  <li>First Item
    <ul>
      <li>First sub item</li> # aligns to the left
    </ul>
  </li>
  <li>Second Item
    <ul>
      <li>second list sub item</li> # aligns to the left edge of parent
    </ul>
  </li>
  <li>Third Item
    <ul>
      <li>third list sub item</li> # aligns to the left edge of parent
    </ul>
  </li>
  <li>Fourth Item
    <ul> # expected to flow over right edge
      <li>fourth list sub item</li> # aligns to the right of parent LI
    </ul>
  </li>
  <li>Fifth Item
    <ul> # expected to flow over right edge
      <li>fifth list sub item</li> # aligns to the right of parent LI
    </ul>
  </li>
</ul>

和CSS：

#menu, #menu li {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
list-style:none;
}
#menu {
width:100%;
float:left;
position:relative;
padding:0;
margin:2em 0;
z-index:5;
}
#menu li {
position:relative;
float:left;
width:20%; /* 5 list items for main nav */
}
#menu li a {
text-decoration:none;
display:block;
}
#menu li a:hover, #menu li:hover a {
text-decoration:none;
}
#menu ul {
position:absolute;
left:-9999px;
margin:0;
padding:0;
}
#menu ul li {
border-top:1px solid #fff;
float:none;
width:100% !important;
}
#menu ul a {
white-spacing:nowrap;
font-weight:normal;
}
#menu li:hover ul {
left:0;
}
#menu ul li a {
padding:0.5em 1em;
}
4

0 回答 0