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

#menuB         


        

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:

  

    
menu item
 
    
menu item 1
 
    
menu item 2
 
    
menu item 3
 
  
 

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):

Pro1 ...

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