css - 下拉菜单 - 使 子菜单的宽度为 100%

Question

为了实现客户想要的东西，我有点疯狂。我可以告诉他们这是不可能的，但我喜欢一个很好的挑战；)

基本上，我正在尝试做一个下拉菜单，其中的下拉菜单 <ul> ， 或者:

ul.menu li ul

被一个div包围。的种类:

<ul class="menu">
   <li>
       <a href="#">Item</a>
       <div class="submenu">
           <ul>.....</ul>
       </div>
   </li>
</ul>

我希望该 div 具有宽度:100% 并填充页面的整个宽度，但将 UL 内部对齐到适当的 <li> .

问题是 <div class="submenu">将与 relative 一样宽容器，无论是主 <ul class="menu">或 <div>包装 <ul class="menu"> .

网站本身的宽度为 1000 像素，宽度居中 margin:0 auto;
我希望我已经正确地解释了自己:S 这是我放在一起的模型的链接: Dropdown Menu Mock up

任何帮助高度赞赏。

谢谢，
亚历克斯

Answer 1

老问题，但希望答案会对某人有所帮助。大约一个月前，我不得不从事与此类似的工作。

这是我基本上所做的事情(注意:你必须做一些额外的工作才能在旧的 IE 中工作):http://jsfiddle.net/doubleswirve/xbLrW/2/

我没有使用嵌套 div而是坚持使用嵌套列表。使用如下基本标记:

<div class="nav">
  <ul>

    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Widget A</a></li>
        <li><a href="#">Widget B</a></li>
        <li><a href="#">Widget C</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Locations</a>
      <ul>
        <li><a href="#">Location A</a></li>
        <li><a href="#">Location B</a></li>
        <li><a href="#">Location C</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Staff</a>
      <ul>
        <li><a href="#">President</a></li>
        <li><a href="#">VP</a></li>
        <li><a href="#">Manager</a></li>
      </ul>
    </li>

  </ul>
</div>

您可以使用以下样式:

/* GENERAL */

body { overflow-x: hidden; } /* trick from css-tricks comments */

/* FIRST LEVEL */

.nav > ul > li { 
  display: inline-block; 
  position: relative; 
  padding: 3px 10px 3px 0;
  z-index: 100;
}

/* SECOND LEVEL */

.nav > ul > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0 1000em; /* trick from css-tricks comments */
  margin: 0 -1000em; /* trick from css-tricks comments */
  z-index: 101;
  visibility: hidden;
  opacity: 0;
  background: rgba(255, 240, 240, 0.8);
}

.nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}

.nav > ul > li > ul > li {
  padding: 3px 0;
}

如果你想对 CSS 变得时髦，你可以将它添加到第二级 ul :

.nav > ul > li > ul {
  ...
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

如果有人有兴趣在旧 IE 中进行类似的工作，或者想要更深的嵌套列表，请告诉我。

为了让您有一个良好的开端，这里有一些对我有帮助的有用链接:

Full browser width bars (CSS tricks article/comment)

Fixing z-index (helpful for IE7)

Chris Coyier 在工作中真的涵盖了我们，哈哈。