Limits of :not() selector?

[FezVrasta]

Hello, I’m writing a stupid CSS menu without Javascript.

I’m making it just for see if is possible to remove js completly and have a nice menu.

I’ve almost did it, it opens submenus, have an hoverintent for delay the close of submenus etc.
The only problem I have is to make a submenu close if I open another submenu.

For do it I’ve thinked about this CSS:

nav > ul > li > ul:not(li:hover > ul) {
max-height: 0px;
}

It means:
hide every submenu except the one with the parent hovered.

But… it doesn’t work neither in Chrome or Firefox.

This is the menu:
http://jsfiddle.net/NfzAe/16/

My doubt is that the :not() selector has some limit and doesn’t allow nested selectors in it. On web I can’t find examples with the allowed selectors.
May someone help me get the problem?

Thanks.

[FezVrasta]

Sorry guys I’ve solved the problem, but I’m still curious about the limits of the :not() selector.
If someone can explain me how it works please…

For fix it I’ve used this CSS:

nav > ul:hover > li:not(:hover) > ul {
display: none;
}

I’ve just moved the not selector on the parent, so I don’t need to specify the “li > hover” into the :not() selector.

[http://jsfiddle.net/NfzAe/17/](http://jsfiddle.net/NfzAe/17/)

[CrocoDillon]

You can only have simple selectors as argument: http://www.w3.org/TR/css3-selectors/#negation

Combinations are not allowed. Have you tried:?

nav li:not(:hover) > ul {
max-height: 0;
}

[Paulie_D]

http://www.sitepoint.com/css3-video-tutorial-not-selector/

[FezVrasta]

Thank you for the useful links.

[Author]

Posts