HTML：在创建子菜单时遇到问题，如何创建第三级菜单？答案

【问题标题】：HTML: Having problems creating submenus, how do you create a third level of menus?HTML：在创建子菜单时遇到问题，如何创建第三级菜单？
【发布时间】：2013-11-22 07:18:06
【问题描述】：

我开始做一个网站，我设法用第一组菜单制作了一个导航栏。第二组花了一些时间，但我设法做到了。但现在我想做第三组子菜单，但我不知道怎么做。有点像这张图片：http://vista-buttons.com/vista-skin/images/help/1_3.gif。访问者可以选择将鼠标悬停在产品 > 子菜单项 1 > 子菜单项 1_2 上这是我所拥有的：

HTML：

<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="">Menu1</a></li><li>
<a href="">Menu1</a>
<ul>
<li><a href="">Menu2</a>
</li></ul><li>
<a href="">Menu1</a></li><li>
<a href="">Menu1</a></li>
</ul>
</div>
<div style="z-index:0;left:0;top:0;width:100%;height:100%">
<img src="unknown.jpg" style='width:100%;height:100%'/>
</div>

CSS：

    body{
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    font-family: Arial;
    font-size: 18px;
}
#nav{
    background-color: #222;
}
#nav-wrapper{
    width: 960px;
    margin: 0 auto;
    tex-align: left;
}
#nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}
#nav ul li{
    display: inline-block;
}
#nav ul li:hover{
    background-color: #333;
}
#nav ul li a,visited{
    color: #ccc;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li a:hover{
    color: #ccc;
    text-decoration: none;
}
#nav ul li:hover ul{
    display: block;
}
#nav ul ul{
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
    min-width: 200px;
}
#nav ul ul li{
    display: block;
}
#nav ul ul li a,visited{
    color: #ccc
}
#nav ul ul li a:hover{
    color: #099;
}
div#nav{
  text-align: center;
}

对不起，如果问题太简单了，谢谢。

【问题讨论】：

标签： html css drop-down-menu navigation navigationbar

【解决方案1】：

试试这个 Fiddle Example..

<ul class="top-level-menu">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li>
    <a href="#">Offices</a>
    <ul class="second-level-menu">
        <li><a href="#">Chicago</a></li>
        <li><a href="#">Los Angeles</a></li>
        <li>
            <a href="#">New York</a>
            <ul class="third-level-menu">
                <li><a href="#">Information</a></li>
                <li><a href="#">Book a Meeting</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Jobs</a></li>
            </ul>
        </li>
        <li><a href="#">Seattle</a></li>
    </ul>
</li>
<li><a href="#">Contact</a></li>

DEMO FIDDLE

【讨论】：