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">。< / p>

网站本身的宽度为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中进行类似工作或想要更深层次的嵌套列表，请告诉我。

为了让您先行一步，这里有一些有用的链接帮助了我：

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

Answer 2

你说得对，因为那个盒子模型不能那样工作。

我可以想到一件事，那就是将你的div设置为

position:absolute

并使用top，left，right属性来定位它们。但是，正如你所说，如果你在父元素上有position：relative，那将无效。

老实说，如果没有可能在浏览器之间破坏的可怕混乱，很难实现这一目标。我见过同龄人和同事花了很多时间尝试实现这样的事情，构建越来越不稳定的代码“修复”以使其跨浏览器工作，接收客户关于它不能在IE6和Firefox 1.5中工作的投诉，只是为了完全放弃这个'功能'。

下拉菜单 - 使<ul>子菜单100％宽度</ul>

2 个答案: