三层下拉菜单答案

【问题标题】：triple tier drop down menu三层下拉菜单
【发布时间】：2014-05-21 01:13:14
【问题描述】：

我一直在尝试制作一个包含 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;
}

【问题讨论】：

您遇到的具体问题是什么？到目前为止，您尝试过什么来解决它？你能设置一个 jsfiddle 来展示这个问题吗？

标签： html css drop-down-menu

【解决方案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

【讨论】：