下拉菜单 - 使<ul>子菜单宽度为100%

Question

下拉菜单 - 使<ul>子菜单宽度为100%

4

我很努力地想满足客户的需求，但有点头疼。虽然我知道这可能不太可能实现，但我喜欢接受挑战 ;)

基本上，我正在尝试创建一个下拉菜单，其中下拉菜单的<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 应该对齐相应的

。问题在于

的宽度将与 relative 容器一样宽，无论是主要的

- elmediano

父元素是否需要 position: relative？如果不需要，你可以在伪元素上设置固定高度和背景，这是一个演示。如果需要，也不是不可能，你可以将绝对定位的元素作为 <body> 的子元素，使用 z-index 设置堆叠等级等等。但这不是一个灵活的解决方案，因为你必须手动调整 top 如果垂直间距发生变化。 - silvenon

很遗憾，如果可以的话我会给它点个踩，因为“下拉菜单模拟”是一个充满重定向链接的垃圾邮件。 - Steven Ventimiglia

2个回答

1

你说得很对，盒模型确实不是那样工作的。

我能想到的一个方法是将你的 div 元素设置为

position:absolute

并使用 top、left、right 属性对它们进行定位。但是，正如你所说，如果在父元素上使用 position: relative，则这将无法工作。

老实说，要实现这一点很困难，需要使用大量的解决方法，而这些方法可能会在不同浏览器之间发生问题。我看过同事和同行花费很长时间来尝试实现这样的功能，构建更加脆弱的代码“修复程序”以在各个浏览器中使其正常工作，还收到客户的抱怨，称其在 IE6 和 Firefox 1.5 中无法正常工作，最终放弃了这个“功能”。

- Lexx Koto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- doubleswirve · Accepted Answer

虽然这是一个老问题，但希望答案能对某些人有所帮助。我大约一个月前也需要处理类似的内容。

以下是我基本上所做的事情的演示（请注意：您必须进行一些额外的工作，以使其在旧版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中使此工作方式感兴趣，或者想要更深层次的嵌套列表，请告诉我。

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

- 完整的浏览器宽度栏 (CSS技巧文章/评论) - 修复z-index (对IE7有帮助) Chris Coyier真的很厉害。