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

三层下拉菜单

1 个答案: