CSS Only Drop Down Menu

April 27, 2023 Post a Comment

I am trying to make CSS drop down menu (no javascript involved). According to http://pixelspread.com/blog/289/css-drop-down-menu I only need to add #menuBar #test2 a:hover .subM

Solution 1:

Your HTML structure isn't set up to allow multiple sub-menus with a single css statement. If you look at Mcinerney's HTML:

<div id="menu">
  <ul id="item1">
    <li class="top">menu item</li> 
    <li class="item"><a href="#">menu item 1</a></li> 
    <li class="item"><a href="#">menu item 2</a></li> 
    <li class="item"><a href="#">menu item 3</a></li> 
  </ul> 
</div>

and his css:

#menu ul:hover .item{display:block;}

it translates to "If you hover over a "ul" that is a descendant of an element with id, "menu", then find all elements that are descendants of said "ul" with the class, "item" and set their display to "block".

You can do something similar, but you will need to add a line of css for each sub-menu based on the id of the LI element:

#test2:hover div.subMenu { display: block; }

"#test2" refers to any element with an id of "test2".

"div.subMenu" refers to any element (in this case a div) with a class designation of "subMenu". Because it comes after "#test2", the div element must be a descendant of "#test2".

In order to keep your background-image on hover, you'd need to make some changes to the css and html. First, designate a class on the "A" (because we don't want to reference all "A" elements that are children of #test2, just the designated one):

<li id="test2"><a href="#" class="top">Pro1</a> ...

Then modify your css so that the background is set upon the hover over #test2 (not #test2 a):

#test2:hover a.top {
  background:url("../images/btTest.jpg") no-repeat top;
}

Solution 2:

div.subMenu is not a descendant of 'a' tag. Try:

#menuBar #test2 a:hover + .subMenu{  
    display:block;
}

The '+' means 'direct following sibling of'

You will probably need also

.submenu:hover {
    display:block;
}

Or just combine them:

#menuBar > li > a:hover + .subMenu, .submenu:hover {  
    display:block;
}

Solution 3:

Here is a cross-browser CSS only drop down menu, that works in IE6 too. It uses CSS hacks AND conditional HTML markup, but it works!

http://www.cssplay.co.uk/menus/final_drop.html

Solution 4:

There's a good example of CSS-only menus in action at Steve Gibson's site - http://www.grc.com.

Solution 5:

head on over to my http://collins.class401.com/nav folder, download all the css and gifs and the js's (don't worry, it works without javascript also) and veiw the readme and check out the demo

this is exactly what your looking for

Html5 Guide