how to target 'hover' of nested list

Question

hey,

if I set visibility:hidden on a nested li element, how do I set it back on hover?

eg.

#menu li ul li {
visibility: hidden;
}

I tried:

#menu li ul li:hover {
visibility: visible;
}

But it doesn't work - so clearly I haven't got the syntax right!

cheers

Answer 1

visibility: hidden hides the element and leaves no hoverable surface, so there will never be a hover event triggered.

Try opacity: 0 (or even opacity: 0.00001, not sure right now whether the surface remains with 0) to get the desired effect. Note that IE < 8 needs special treatment (filter: alpha(opacity=0))

Other browsers need other opacity settings as well, check out @Nick Craver's link for a full list.

Answer 2

Why not add a child wrapper in each <li> like this (could be a p or a div):

<li><p>dadada</p></li>

Then, for styling:

#menu ul li p {
 visibility: hidden;
}

#menu ul li:hover p {
 visibility: visible;
}