html - CSS only drop down menu

Question

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

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