全宽CSS下拉菜单 [英] Full width css dropdown menu

问题描述

我正在尝试创建纯粹和简单的CSS下拉菜单，这将在每个项目下的全宽模式下打开，但也会保留每个下拉菜单在其父项下面。
这张图片更好地解释了我想要实现的目标：

我只是无法弄清楚如何在每个li内保留嵌套的UL，但也有一个全宽背景包装全部。

这是一个我在 Codepan 上准备的演示：
http://cdpn.io/wLjFm

解决方案

  / *不是很相关的样式* / h1 {font-size：20px; padding-top：20px; } .container {position：relative;边距：20px auto 0 auto;宽度：75％; } .header {background：#eee; } .nav {background：#ccc; } / *相关样式* / body {overflow-x：hidden; } / *来自css-tricks的注释* // * FIRST LEVEL * /。nav> ul> li {display：inline-block;位置：亲戚; padding：3px 10px 3px 0; z-index：100;} / * SECOND LEVEL * /。nav> ul> li> ul {position：absolute;左：0;顶部：100％;填充：0 1000em; / *来自css-tricks的评论* / margin：0 -1000em; / *来自css-tricks的评论* / z-index：101;能见度：隐藏;不透明度：0;背景：rgba（255,240,240,0.8）;}。nav> ul> li：hover> ul {visibility：visible;不透明度：1;}。nav> ul> li> ul> li {padding：3px 0;}。nav> ul> li：hover .drop {font-weight：bold;}  

 < div class =header> < div class =container> < h1& Hank's Big Leauge Widgets< / h1> < span>您想要一个小部件？我们得到了！< / span> < / DIV> <！ - 导航 - > < div class =nav> < ul class =container> <李> < a class =drophref =＃>产品< / a> < UL> < li>< a href =＃>小部件A< / a>< / li> < li>< a href =＃>小部件B< / a>< / li> < li>< a href =＃>小部件C< / a>< / li> < / UL> < /锂> <李> < a class =drophref =＃>位置< / a> < UL> < li>< a href =＃>位置A< / a>< / li> < li>< a href =＃>位置B< / a>< / li> < li>< a href =＃>位置C< / a>< / li> < / UL> < /锂> <李> < a class =drophref =＃> Staff< / a> < UL> < li>< a href =＃>总裁< / a>< / li> < li>< a href =＃> VP< / a>< / li> < li>< a href =＃> Manager< / a>< / li> < / UL> < /锂> < / UL> < / div>< / div>< div class =content container> < p>各种内容< / p> < p>各种内容< / p> < p>各种内容< / p> < p>各种内容< / p> < p>各种内容< / p> < p>各种内容< / p>< / div> ** CSS和HTML **  

演示

JSFIDDLE

I am trying to create pure and simple CSS drop down menu which will open in a full width mode underneath each item but will also keep each drop down menu underneath it's parent item. this image better explains what I am trying to achieve:

I just can't figure out how to keep the nested UL inside each li but also have a full width background wrapping it all.

Here is a demo I prepared on Codepan: http://cdpn.io/wLjFm

解决方案

/* not very relevant styling */
h1         { font-size: 20px; padding-top: 20px; }
.container { position: relative; margin: 20px auto 0 auto; width: 75%; }
.header    { background: #eee; }
.nav       { background: #ccc; }

/* relevant styling */
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;
}

.nav > ul > li:hover .drop {
  font-weight: bold;
}

<div class="header">

  <div class="container">
    <h1>Hank's Big Leauge Widgets</h1>
    <span>You want a widget? we got 'em!</span>
  </div>


  <!-- NAVIGATION -->    
  <div class="nav">
    <ul class="container">
      <li>
        <a class="drop" 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 class="drop" 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 class="drop" 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>
</div>

<div class="content container">
  <p>All sorts of content</p>
  <p>All sorts of content</p>
  <p>All sorts of content</p>
  <p>All sorts of content</p>
  <p>All sorts of content</p>
  <p>All sorts of content</p>
</div>


**CSS and HTML**

Demo

JSFIDDLE

这篇关于全宽CSS下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！