sub-sub-menu css

Question

I have a menu structured in CSS, which can only display sub-pages. I also want to be able to display sub-sub-pages.

This is what I already have:

#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;
}

Source code 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

Do you mean that you want the "sub sub menus" hidden, and displaying on mouseover, like the sub menus?

If so, you can add the following 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
}

See it in action: http://jsfiddle.net/bozdoz/PGDKE/