下拉菜单 - 使< ul>子菜单100％宽度 [英] Dropdown Menu - Make the <ul> submenu 100% width

问题描述

我会有点疯狂，试图实现我的客户想要的东西。我可以告诉他们这是不可能的，但我喜欢一个很好的挑战;）

I am going a bit crazy trying to achieve something my client wants. I could tell them it's not possible but I love a good challenge ;)

基本上，我想做一个下拉菜单，其中下拉菜单< ul> ，或：

Basically, I'm trying to do a dropdown menu in which the dropdown <ul>, or:

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> 。

I want that div to have width:100% and fill the whole width of the page but have the UL inside aligned to the appropriate <li>.

问题是 ; div class =submenu> 将与相对容器一样宽，无论是或者< div> 包装< ul class =menu > 。

The problem is the <div class="submenu"> will be as wide as the relative container, be it the main <ul class="menu"> or a <div> wrapping the <ul class="menu">.

网站本身宽度为1000px，宽度中心宽度 margin：0 auto;

The website itself has 1000px width and is centered width margin:0 auto;

我希望我已经正确地解释了自己：S这里是一个链接到我放在一起的模拟：下拉菜单模拟

I hope I have explained myself properly :S Here is a link to a mock up I have put together: Dropdown Menu Mock up

任何帮助高度赞赏。

谢谢，
Alex

Thanks, Alex

推荐答案

老问题，有人。

这里是一个小东西我基本上做了（注意：你必须做一些额外的工作，这在旧的IE中工作相同）： http://jsfiddle.net/doubleswirve/xbLrW/2/

Here is a fiddle of what I basically did (note: you have to do some extra work for this to work the same in older IEs): http://jsfiddle.net/doubleswirve/xbLrW/2/

我没有使用嵌套的 div ，而是使用嵌套列表。使用以下基本标记：

I didn't use a nested div and instead stuck with nested lists. With a basic markup like the following:

<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与snazzy，你可以添加到第二级 ul ：

If you wanted to get snazzy with the CSS, you could add this to the second level 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中类似或希望更深层嵌套

If anyone is interested in making this work similarly in old IEs or wants deeper nested lists, let me know.

为了给你一个开头，这里有一些有用的链接帮助我：

To give you a head start, here are some useful links that helped me:

• 完整的浏览器宽度栏（CSS技巧文章/评论）


• 修复z-index（有助于IE7）

• Full browser width bars (CSS tricks article/comment)
• Fixing z-index (helpful for IE7)

Chris Coyier真的在我们工作的地方。

Chris Coyier really covers us at work lol.

这篇关于下拉菜单 - 使< ul>子菜单100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！