子子菜單css

Question

我有一個CSS結構的菜單，它只能顯示子頁面。我也希望能夠顯示子子頁面。

這是我已經有：

#nav { 
width:800px; 
margin:30px 50px;; 
padding: 0; 
float:left; 
} 
#nav li { 
list-style: none; 
float: left; 
padding:0 10px; 
} 

/*--temp--*/ 
#nav ul ul li { 
clear:left; 
} 
#nav ul ul { 
position:absolute; 
left:14em; 
top:0; 
} 
#nav ul ul li a { 
display:block; 
padding: 3px 15px; 
color: #242424; 
text-decoration: none; 
font-size:13px; 
font-family:"Lato" !important; 
} 
/*--end temp--*/ 
#nav li a { 
display: block; 
padding: 3px 15px; 
color: #242424; 
text-decoration: none; 
font-size:13px; 
font-family:"Lato" !important; 
} 
#nav a:hover { 
color:#367FB3; 
} 
#nav a:active { 
color:#367FB3; 
} 
#nav li ul { 
display: none; 
width: 14em; /* Width to help Opera out */ 
background-color:transparent; 
z-index:666; 
} 
#nav li:hover ul, #nav li.hover ul { 
display: block; 
position: absolute; 
margin:0px -10px; 
padding:0px; 
} 
#nav li:hover li, #nav li.hover li { 
float: none; 
line-height:30px; 
} 
#nav li:hover li a, #nav li.hover li a { 
background-color:#367FB3; 
color:#fff; 
font-size:13px; 
font-family:"Lato" !important; 
} 
#nav li li a:hover { 
background-color:#52baff; 
color:#fff; 
} 

源代碼的html：

<!--begin header--> 
     <div id="header" > 
       <div id="logo"> 
       </div> 
       <div id="top-menu"> 
         <ul id="nav"> 
           <li><a href="#">Home</a></li> 
           <li><a href="inner.html">Services</a> 
             <ul> 
               <li><a href="#">Bedrijfsprofiel</a> 
                 <ul> 
                   <li><a href="#">uhuh</a></li> 
                 </ul> 
               <li><a href="#">Visie</a></li> 
               <li><a href="#">Werkwijze</a></li> 
             </ul> 
           </li> 
           <li><a href="#">Projecten</a></li> 
           <li><a href="#">Nieuws</a></li> 
           <li><a href="#">Contact</a></li> 
         </ul> 
       </div> 
     </div> 
     <!--end header--> 

Answer 1

你的意思是你想要的「子子菜單」隱藏和顯示鼠標懸停，像子菜單？

如果是這樣，你可以添加以下CSS：

#nav li:hover ul ul { 
    display:none; // hide the unordered list that is inside the unordered list 
} 
#nav li ul li:hover ul { 
    display:block; // display the unordered list in the same way as your sub menu 
} 

看到它在行動： http://jsfiddle.net/bozdoz/PGDKE/