Dropdown Menu - Hovering


I am currently designing a site that uses a Javascript dropdown menu which uses CSS to style it. Previously i had wanted the menu to do the following and i thought this had to be done in javascript.

Basically i want the dropdown menu to do the following:

  1. When you roll over the parent <li> i want it to retain the hover class (i.e light blue) when selecting an <li> in the child menu

  2. Then when you roll over a child menu <li> i want it to retain the hover class (i.e light blue) of both the parent and the child

  3. When i am in the grandchild menu i want it to retain the hover class (i.e light blue) of both the parent and the child as well as selecting the hover class of the <li> in the grandchild menu…

However, i was told in these forums that what I wanted could actually be done in CSS. I was told that the following would work:

.menu :hover > a, .menu ul :hover, .menu ul ul :hover > a {color:#000; background:#fff;}

I edited this to what i thought would work for my menu and sure enough it worked… almost…

The problem i am having is that as well as changing the colour of the <li> when hovered over there is also a small .gif arrow. At the moment i am basically stuck at the stage where the dropdown menu holds the hover class over in to the child and grand child menu but it also brings the arrow across from the parent <li> This dosnt work as on the child menu there are some <li> elements that dont have submenu’s so obviously i dont want an arrow on those links and when i go in to the grandchild menu the arrow also appears on that menu… Also on the child menu the arrow is facing a different way and when you go to the grandchild menu the arrow changes to the parent arrow (pointing down) I have tried multiple ways of fixing this and cannot fix it…

I basically want it to retain the hoverclass for each menu but also display the correct arrow (where needed) and i would like it to be browser friendly (ie6 friendly that is!!). I have attached the files so you can see what i mean as i am sure what i am saying is very confusing!! if anyone has any ideas it would be most appreciated!



Hi, insteadof attaching your code in a zip file, can you just post a link to teh site where this is at? It would make debugging so much easier and faster :slight_smile:


My site is at the following. Sorry i have to write it this way i am new to this forum so cant post links yet!


Many thanks



Link added by Spike