CSS How to hide current child menu items when hovering over parent's sibling items without javascript?

The simple solution is attempt to degrade as best as possible. In this case, I'd set a background color on the child menu and jack up z-index on hover only, so the bg will cover other child menus edit they'll still be visible, but the text won't overlap. Then use javascript to make it as you really want The more complicated solution means you have to make all child menus take up identical space--one way is to use negative margin and then padding to cover up that space--and let whatever child menu that's displayed cover up the open one, again by greater z-index (applied to the parent on hover) edit Another thing I use all the time to handle this kind of situation is to do something like the following ul:hover ul { display:none; } //or in your case, set to invisible ul li:hover ul { display:block; } //in your case, set to visible This means the submenu will disappear when the UL is hovered over and, because the li:hover is lower in the cascade and more specific (I usually have to deal with lots of here-state class names--don't think you will), should allow for the submenu to reappear.It's not quite as fine-grained as you want, but nearly.

The simple solution is attempt to degrade as best as possible. In this case, I'd set a background color on the child menu and jack up z-index on hover only, so the bg will cover other child menus--edit they'll still be visible, but the text won't overlap. Then use javascript to make it as you really want.

The more complicated solution means you have to make all child menus take up identical space--one way is to use negative margin and then padding to cover up that space--and let whatever child menu that's displayed cover up the open one, again by greater z-index (applied to the parent on hover). Edit Another thing I use all the time to handle this kind of situation is to do something like the following ul:hover ul { display:none; } //or in your case, set to invisible ul li:hover ul { display:block; } //in your case, set to visible This means the submenu will disappear when the UL is hovered over and, because the li:hover is lower in the cascade and more specific (I usually have to deal with lots of here-state class names--don't think you will), should allow for the submenu to reappear. It's not quite as fine-grained as you want, but nearly.

Options two and three here are what I would use, and they work great. – Eric Meyer Mar 5 '10 at 0:19 DN, those suggestions are getting me really close, big thanks! – tblank Mar 5 '10 at 15:51.

If what you want is that when the user clicks a child2 selection the response produces a page with child2 displayed, but child2 should disappear when the user hovers over parent1 or parent3, then you'll need to use JavaScript. The reason being that it's an event that affects more than one node in the DOM in different ways. CSS only affects 1+ nodes in the DOM in the same way, and usually only at page load.

The exception are pseudo-classes like :hover which can affect display after page load. If you need a CSS multi-menu solution, or just want to look at a good one that might help you find what your answer, check out this GRC CSS. I learned a lot from it, and hacked it into a solution I've used numerous times.

There is no pseudo class in css to trigger mouse out equivalent event. You have to use javascript to accomplish what you are trying to do. There are lot of menus/plugins available which does exactly what you are doing (What I mean by the statement is no need to reinvent the wheel).

I'm positive you won't be able accomplish this level of fine-grained control solely through CSS. You'll need to change states on your DOM elements with JS.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.