Three level CSS Menu

[mirozake]

Hi everyone,
I have a three level css menu. I'm not sure how to get the third level going. I'm a little new to this. It seems the first two levels work very nicely but the third level appears just like the second (and shows as second level). Posting my css and html here and really hoping for some help. Badly stuck.. :( Thanks!

Here is the css code:

@charset "UTF-8";
/* CSS Document */

ul, li, html, a
{
margin:0; padding:0;
}

body
{
text-align: center;
margin: 0 auto;
padding: 0;
font: 65% arial, sans-serif;
}

p  {
color: #666;
text-align: justify;
padding: 0px;
width: 250px;
}

p img {
border: 1px double #999;
}

li
{
list-style-type:none;
}

a
{
text-decoration: none;
color: #3f6fb1;
}


#wrapper {
text-align: center;
margin-left: auto ;
 margin-right: auto ;
padding: 0px;
border-left:solid #cedf93;
border-right:solid #cedf93;
width: 901px;
}

#bodystuff {
padding: 20px 0px;
}

#bodystuff p {
width: 700px;
}

#topleft {
float: left;
margin: 0 0 0px 0;
}

#topright {
position:relative;
margin-top:0;
float: right;
}


#header {
margin: 0px 0 0px 0;
}

#subheader {
margin: 0 0 0px 0;
padding: 20px 20px;
text-align:left;
font-size: 1.2em;
}

#subheader p {
color: #666;
text-align: left;
padding: 0px;
width: 865px;
}


#container
{
margin: 0;
}
#side-a {
float: left;
width: 280px;
padding-left: 20px;
padding-right: 0px;
}

#side-b {
float: right;
width: 280px;
padding-left: 20px;
padding-right: 0px;
}

#content {
float: left;
width: 280px;
padding-left: 20px;
padding-right: 0px;
}


#footer {
clear: both;
background: #ffffff;
}

/*navigation menu*/

ul#nav
{
width: 100%;
height: 3em;
margin: 1em auto 0;
margin-top:0;
font-size: 1.3em;
}

ul#nav li
{
position: relative;
float: right;
width: 10em;
height: 3em;
line-height: 3em;
background-color: #ffffff;
border-right: 2px solid #abc936;
border-bottom: 2px solid #white;
}

ul#nav li.noBorder
{
border-right: none;
}

ul#nav li:hover {
border-top: 4px solid #CCC;
}

ul#nav li a {
display: block;
float: left;
width: 100%;
}

ul#nav li ul
{
display: none;
}

ul#nav li:hover ul
{
background-color: #F00;
display: inline;
float: left;
width: 10em;
height: auto;
margin: 0; padding:0;
text-align: left;
font-size: 1em;
}

ul#nav li:hover ul li
{
width: 100%;
height: 2em;
background-color: #cedf93;
border: none;
border-bottom: 2px solid #white;
overflow:hidden;
}

ul#nav li:hover ul li a
{
display: block;
margin: 0; padding: 0 0 0 .3em;
height: 100%;
line-height: 2em;
}


ul#nav li:hover ul li a:hover
{
background-color: #3f6fb1;
text-decoration: none;
color: #ffffff;
}

/*not the end of navigation but for third level drop downs here's where the code starts*/

ul#nav li ul li ul
{
display: none;
}

ul#nav li ul li:hover ul
{
background-color: #000000;
display: inline;
float: left;
width: 10em;
height: auto;
margin: 0; padding:0;
text-align: left;
font-size: 1em;
}

ul#nav li ul li:hover ul li
{
width: 100%;
height: 2em;
background-color: #000000;
border: none;
border-bottom: 2px solid #white;
overflow:hidden;
}


/*end of third level drop downs*/

/*end of navigation*/

#wrapper #container #side-a p img {
text-align: center;
}
#wrapper #subheader div h3 {
font-size: 1.2em;
font-style: normal;
font-weight: 200;
color: #06C;
}

Here's the part of the html relevant to this:

 <div id="topright">
 <ul id="nav">
  <li class="noBorder"><a href="#">Contact Us</a></li>
  <li><a href="#">Our Work</a></li>
  <li><a href="#">Our Company</a></li>
  <li><a href="services.html">Products & Services</a>
  <ul>
    <li><a href="#">Respiratory Care</a></li>
  <li><a href="#">Sleep Disorders</a></li>
    <ul>
      <li><a href="#">Sleep Diagnostics</a></li>
  <li><a href="#">Sleep Therapy</a></li>
      <li><a href="#">Sleep Lab</a></li>
    </ul>
  <li><a href="#">Cardiology</a></li>
  <li class="noBorder"><a href="#">IT Solutions</a></li>
    </ul>
  </li>
  <li><a href="index.html">Home</a></li>
</ul>
 </div>

[webprutser]

Don't know if your problem is solved by now, but I have exactly the same organised menu. Difference though is I use only a div with an ID, not a div and an ul with an ID. What I don't see in your code is the mentioning of "visibility". "display" is something else. Anyhow this is my CSS code, some people over here helped me with it and its working fine that is in Firefox and Google Chrome. I just posted the problem I have with Internet Explorer tonight and hope for an answer. Anyhow, with below code you could have the start of a menu working well in Firefox and Chrome. Can keep you posted on the fix for IE, if you wish. HTML is basicly the same, the div wrapped around the ul is called siteNavigation:

CSS for navigation:

#siteNavigation ul {
width:150px; /* of image */
list-style-type:none; /* removes bullets */
outline:none;
border:none;
margin:0;
padding:0;
}

#siteNavigation ul a img {
border:none;
}

#siteNavigation ul li {
position:relative; /* so the second level takes position from it */
margin:0;
padding:0;
}

#siteNavigation ul li a {
display:block;
height:29px;
}

/* 2nd level */

#siteNavigation ul li:hover ul { /* reveals second level when hovering on the first */
visibility:visible;
}

#siteNavigation ul ul {
visibility:hidden; /* to initially hide the drop down menu */
position:absolute;
top:0px;
left:150px; /*position submenu in relation to mainmenu */
width:150px; /* of picture */
margin:0;
padding:0;
}

#siteNavigation ul ul a img { /* image dimensions */
display:block;
width:150px;
height:29px;
border:none;
}

#siteNavigation ul ul li {
height:29px; /* height of second level list element matched to image height */
position:relative; /* IH_added for 3rd level */
}

#siteNavigation ul ul li a {
display:block;
height:29px;
}

/* 3rd level */
#siteNavigation ul li:hover ul li ul { /* to initially hide the drop down menu_IH */
visibility:hidden;
position:absolute;
top:0px;
left:150px; /* position subsubmenu */
width:150px; /* width image */
}

#siteNavigation ul ul ul a img { /* image dimensions */
display:block;
width:150px;
height:29px;
border:none;
}

#siteNavigation ul li ul li:hover ul {
visibility:visible; /* reveals 3rd level when hovered */
}

#siteNavigation ul ul ul li {
height:29px; /* height of third level list element matched to image height */
}