三層下拉菜單

Question

我一直在嘗試製作有3層的菜單，例如我想將鼠標懸停在「家人」上並顯示「假期」和「一日遊」。然後，我想懸停'假期'或'一日遊'，並顯示下一個選項'視頻1-3'。我只做了幾個星期的HTML5和CSS3，所以我很綠。任何幫助都會很棒。

<ul id="menu2"> 
       <li> <a href="#">Family</a> 
        <ul class="sub-menu2"> 
         <li><a href="#">Holidays</a> 
           <li> <a href="#"> Video 1 </a></li> 
           <li> <a href="#"> Video 2 </a></li> 
           <li> <a href="#"> Video 3 </a></li> 
         </li> 
         <li><a href="#">Day Trips</a> 
           <li> <a href="#"> Video 1 </a></li> 
           <li> <a href="#"> Video 2 </a></li> 
           <li> <a href="#"> Video 3 </a></li> 
         </li> 
        </ul> 
       </li> 
      </ul> 

CSS

#menu2, ul#menu2 ul.sub-menu2 { 
padding:0; 
margin-top: -41px; 
} 

#menu2 li, ul#menu2 ul.sub-menu2 li { 
list-style-type: none; 
display: inline-block; 
width:100px; 
left:73%; 
margin-bottom:4px; 
} 
#menu2 li a, ul#menu2 li ul.sub-menu2 li a { 
text-decoration: none; 
text-align:center; 
color: yellow; 
background: black; 
padding: 5px; 
display:inline-block; 
width:100px; 
border-bottom-right-radius:20px; 
border-top-left-radius: 20px; 
border: 2px solid yellow; 
} 
#menu2 li { 
position: relative; 
} 

#menu2 li ul.sub-menu2 { 
display:none; 
position: absolute; 
top: 30px; 
right: 72px; 
width: auto; 
margin-top:6px; 
margin-bottom:-2px; 
} 
#menu2 li:hover ul.sub-menu2 { 
display:block; 
} 


#menu2 li ul.sub-menu2 a:hover { 
background-color: yellow; 
color: black; 
} 

Answer 1

您的結構是不正確的。它應該是這樣的：

<ul id="menu2"> 
    <li><a href="#">Family</a> 
     <ul class="sub-menu2"> 
      <li><a href="#">Holidays</a> 
       <ul> 
        <li><a href="#">Video 1</a></li> 
        <li><a href="#">Video 2</a></li> 
        <li><a href="#">Video 3</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Day Trips</a> 
       <ul> 
        <li> <a href="#"> Video 1 </a></li> 
        <li> <a href="#"> Video 2 </a></li> 
        <li> <a href="#"> Video 3 </a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

而且你必須稍微修改你的CSS。我在這裏做了一個小矮人：

generic DEMO Fiddle