菜單3級別只水平的HTML/CSS/JavaScript + pushcontent

Question

我試圖做一個3級ul li菜單，採取容器的100％寬度，但兒童ul去父母級別下。

This is a screen what i'm trying to achieve.

#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 { 
 
\t background-color:red; 
 
\t color:#FFF; 
 
\t 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; 
}