Having trouble with nested lists

[SharkBait]

this i what I have:

/* CSS */
#headerMenu li ul li ul {
   display: none;
}

#headerMenu li ul li:hover ul {
   display: block;
}

..
<!-- HTML -->
<ul id="headerMenu">
  <li>Files
     <ul>
         <li>Admin</li>
         <li>Actions
             <ul>
                <li>Add</li>
                <li>Delete</li>
              </ul> 
          </li>
       </ul>
    </li>
</ul>

 

Now the above CSS does not make the Add/Delete UL hidden and I am not sure why I am using this on Firefox for now, I knwo it wont work with IE but I want to get it working with Firefox before i get the DOM working using the Suckerfish method. 

 

Hopefully you can assume the rest of the CSS is there to space everything out properly. What is happening is that it always shows the block add/delete. It is never hidden....

 

Am I doing something wrong?

[dbrimlow]

#headerMenu li ul li ul {

  display: none;

}

 

#headerMenu li ul li:hover ul {

  display: block;

}

 

You are having a "cascading" issue.

 

You are designating the tag level elements "li" and "ul" incorrectly.

 

There is no element "li:hover".

 

The only way to make it work is to use the a tags:

 

 

 

 

Try:

 

#headerMenu ul ul a:link, ul ul a:visited {

  display: none;

}

 

#headerMenu ul ul a:hover, ul ul a:active {

  display: block;

}

[ToonMariner]

you can do it in css - its only ie6 that won't get li:hover

 

try this

 

ul#headerMenu li ul li ul {

  display: none;

}

 

ul#headerMenu li ul li:hover ul {

  display: block;

}

 

sometimes you just have to put the entire cascade of elements in to get it to play ball..