菜單3級僅水平HTML / CSS / JavaScript + pushcontent

Question

我正在嘗試制作一個3級ul li菜單，它占用容器的100％寬度，但是孩子ul在父級別下。

這是我想要實現的屏幕。

 #fakeheader, #fakecontent{ width:100% height:50px; background:red; position:relative } #nav {position: relative;} #nav li { list-style:none; float: left; } #nav li a { display: block; padding: 8px 12px; text-decoration: none; } #nav li a:hover { background-color:red; color:#FFF; opacity:1; } /* Targeting the first level menu */ #nav { min-width:850px; background:#fff; opacity:0.5; display: block; height: 34px; z-index: 100; position: relative; } #nav > li > a { } /* Targeting the second level menu */ #nav li ul { color: #333; display: none; position: absolute; width:850px; } #nav li ul li { display: inline; } #nav li ul li a { background: #fff; border: none; line-height: 34px; margin: 0; padding: 0 8px 0 10px; } #nav li ul li a:hover { background-color:red; color:#FFF; opacity:1; } /* Third level menu */ #nav li ul li ul{ top: 0; } ul.child { background-color:#FFF; } /* A class of current will be added via jQuery */ #nav li.current > a { background: #f7f7f7; float:left; } /* CSS fallback */ #nav li:hover > ul.child { left:0; top:34px; display:inline; position:absolute; text-align:left; } #nav li:hover > ul.grandchild { display:block; } 

 <div id="fakeheader">Test </div> <ul id="nav"> <li> <a href="#">Products</a> <ul class="child"> <li><a href="#">Speakers</a> <ul class="child"> <li><a href="#">10 watt</a></li> <li><a href="#">20 watt</a></li> <li><a href="#">30 watt</a></li> </ul> </li> <li><a href="#">Speakers</a> <ul class="child"> <li><a href="#">10 watt</a></li> <li><a href="#">20 watt</a></li> <li><a href="#">30 watt</a></li> </ul> </li> </ul> </li> <li> <a href="#">Products</a> <ul class="child"> <li><a href="#">Speakers</a> <ul class="child"> <li><a href="#">10 watt</a></li> <li><a href="#">20 watt</a></li> <li><a href="#">30 watt</a></li> </ul> </li> <li><a href="#">Speakers</a> <ul class="child"> <li><a href="#">10 watt</a></li> <li><a href="#">20 watt</a></li> <li><a href="#">30 watt</a></li> </ul> </li> </ul> </li> </ul> <div id="fakecontent"> test </div> 

那么還可以推送菜單下的內容嗎？

在此先感謝您的幫助，並為我糟糕的英語抱歉：P

問候

Answer 1

只需添加一些樣式：

#main-menu ul {
  display: block;
  list-style: none;
  position: relative;
}
#main-menu > ul li ul {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  display: none;
}
#main-menu > ul li:hover > ul {
  display: block;
  color: red;
}