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#test2a:hover{
   background:url("../images/btTest.jpg") no-repeat top;
} 

To be this:

#menuBar#test2:hovera {
  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#test2a:hover + .subMenu { //submenu show updisplay:block;
} 

#menuBarli.subMenu:hover {  //keep submenu show up when hover in submenudisplay: block; 
}

Should be able to be replaced with just this:

#menuBarli:hover.subMenu {
  display: block;
}