Quote:
Originally Posted by mikaZk
Hi
I want to make a menu where the first level is invisible and only the second level shows (Sub levels will only show at mouseover as fly-out). I have tried for a long time now but I can|t seem to figure it out.
What to do what to do? Is it even possible to hide the first level?
(I'm using visual studio 2008.)
m
|
I believe this isn't possible because of the limitations of CSS.
If you mean that you want the level one element to be invisible on the page, there is no way using CSS to trigger a child element inside it. If what you want is a context menu, you can use
JS to insert new visible elements and place them wherever in the document you want; in fact jQuery is an excellent
JS library for doing just that.
If what you want is to hide the first level as soon as it's triggered the second, the order of CSS can't pull that off in any way that I know of. The code for executing a drop down menu to reveal a second level item (navMenu) when you mouse over the first level (navButton) is...
Code:
/* Toggle Menus On and Off */
.navButton:hover .navMenu {
display: block;
}
Here's what the selector specifically defines. When the mouse hovers over the navButton element grab the navMenu element; we can now set properties for the navMenu element and in this case I change the default display. Initially I've set it to none so that the menu element does not appear until someone mouses over it. Then I switch the display back to block so it appears.
However, note the order of the selector. This works because you can define a hover action on the parent element, navButton. This draws the focus of the CSS selector and most CSS is about styling that element. However, CSS allows you to continue to bore down and specify child elements of the current item and that's what we've done in this case. Once we've focused on navButton (but only when a mouse is hovering over it) we style the child element navMenu, and make it appear.
This can't work in reverse. If we specify the .navMenu:hover, we can only affect child elements after that. Not parent elements, so I believe that's where we're stuck.
asp:menu
