Question on using CSS menuing with unorganized lists and the a tag

[jayhawker]

I have a menu that is derived with CSS and an unorganized list as such:

 

<ul>

      <li id="li1"><a href="#" id="mainMenu1" accesskey="1" title="" class="menuItem1">1</a></li>

      <li id="li2"><a href="#" id="mainMenu2" accesskey="2" title="" class="menuItem2">2</a>

            <ul>

                    <li id="li2a"><a href="#" id="mainMenu2" accesskey="2" title="" class="subMenuItem1">2a</a></li>

            </ul>

      </li>

      <liid="li3"><a href="#" id="mainMenu1" accesskey="3" title="" class="menuItem3">3</a></li>

</ul>

 

When a user hovers over li2 , I have hover css for both the list item (li2) and the a link (menuItem2) working fine.  For this particular purpose I want to have different CSS attributes for the li and a tags when hovered over.

 

When I hover over menuItem2 down to the sub menu item (subMenuItem2), the css hover attributes applied to the higher level li (li2) stay, but the they disappear for the a link (subMenuItem1) defaulting back to the default a CSS attributes.

 

What do I do in CSS to have the attributes stick for the a tag in this particular situation when hovering over a lower level list item?

 

Thanks

[cssfreakie]

have a read on the son of suckerfish menu.

 

als you markup is a bit sloppy, you have for instance

<liid="li3">  make that <li id="li3">

 

besides that the identifiers you use in your description ar not see in the code you supplied.

So best tip, check out the son of suckerfish menu, as far as I know the best menu there is.