三层下拉菜单

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。我在这里做了一个小模型:

通用DEMO提琴