Where To Properly Apply :hover To Keep Submenu Css In The Hover State

I am trying to make drop down menu. Some folks helped me on CSS only drop down menu post. Everything works fine except when I hover my mouse to my submenu. The hover state backgro

Solution 1:

You need this:

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

To be this:

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

To get it to stick when you move to the .subMenu. This will not work for IE6 (if you care).

Also these:

#menuBar #test2 a:hover + .subMenu { //submenu show up
  display:block;
} 

#menuBar li .subMenu:hover {  //keep submenu show up when hover in submenu
  display: block; 
}

Should be able to be replaced with just this:

#menuBar li:hover .subMenu {
  display: block;
}