HTML:创建子菜单时遇到问题，如何创建第三级菜单？

Question

我开始制作一个网站，我设法制作了一个带有第一组菜单的导航栏。第二组花了一段时间，但我设法做到了。但是现在我想做第三组子菜单，但我不知道怎么做。有点像这张图片: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;
}

抱歉，如果问题太简单，谢谢。

Answer 1

试试这个 Fiddle 例子..

<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