CSS only drop down menu

Question

Hi guys 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 .subMenu{display:block;}   

to make the sub menu show up. However, in my code, it doesn't work. Could someone help me about this issue? Thanks a lot!

My html

<ul id="menuBar">
   <li id="test1">test1</li>
   <li id="test2"><a href="#">Pro1</a>
     <div class="subMenu">
        <ul>
           <li><a href="#">sub1</a></li>  
           <li><a href="#">sub2</a></li>
           <li><a href="#">sub3</a></li>
         </ul>
         <ul>
            <li><a href="#">Volleyball</a></li>
            <li><a href="#">Walking</a></li>
            <li><a href="#">Water Shoes</a></li>
         </ul>
       </div> <!--end of submenu-->
     </li>
  </ul>

My Css

 #menuBar #test2 a{
background:url("../images/btTest.jpg") no-repeat bottom;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}

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

#menuBar #test2 a:hover .subMenu{  
// I add .subMenu after a:hover and have two a:hover for #test2 a
// I know it won't work but not sure what to do now.
//thanks for the help.
display:block;
}


.subMenu{  // the hidden menu
position:absolute;
top:35px;
left:0px;
z-index: 99999;
width:550px;
background-color:black;
display:none;
}

Answer 1

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;
}

Answer 2

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

Answer 3

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;
}

Answer 4

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

Answer 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