I have quite an intermediate problem with a drop down menu I have. It uses only CSS to create a three level menu with drop down and fly out options. The mark up is a little more complex than most menus you find today as I had to enable a drop down menu with a fly out section.

Top level menu is an unordered list with anchor tags inside. Each anchor tag has a div inside this with another unordered list for each list item for my second level and again inside each list item of the second level is another anchor tag and a div. At this point I have a definition list for my third level list. This was used as an unordered list was inheriting too many styles from the other predefined unordered lists. I used the anchor tags to set display style on hover to be set no matter where you hover and the divs are used to style the menu according to size, widths, colors and backgrounds.

This menu is working perfect with rollovers working on each item. I would like to preset my "first" second level hover state to be active when the parent first level item is selected. Is there any way of using Javascript to call the predefined CSS style of the first second level item to be active when the parent first level item is on hover?

I hope my explanation is good enough to understand.

Steven