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

與此小提琴例嘗試..

<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