Question

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.