html - 三层下拉菜单

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