IE Mac strange behaviour

Applying styles specific to a class to elements without that class

[tompage]

I have a CSS-based navigation menu based on a styled unordered list to create a vertical menu with one level of drop-down sub-menus using the li:hover pseudo-class (and a bit of javascript to get IE to show the same effect). Despite the numerous hurdles to achieveing drop-down menus, I have managed to get it working pretty well on most browsers across Mac and Win (and if the drop-downs don't work in some obscure browser it should just show a simple menu without drop-downs). However, that is all, to some extent, just background. The menu is in the following format:

<ul id=nav>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a>
 <ul>
 <li><a href="#">Submenu item 1</li>
 <li><a href="#">Submenu item 2</li>
 </ul>
</li>
<li><a href="#">Menu item 3</a>
 <ul>
 <li><a href="#">Submenu item 1</li>
 <li><a href="#">Submenu item 2</li>
 </ul>
</li>
</ul>

I then tried to set my menu to have a different style for the LI element of the page you were on and so I added

class="youarehere"

to the relevant

<LI>

tag on each page and created extra styles as follows to style that element and its submenu differently:

#nav li a { ... }
#nav li ul { ... }
#nav li.youarehere a { ... }
#nav li.youarehere ul { ... }

This seems to work in all browsers I have access to, but in IE5.2 Mac it applies the styles within the third and fourth rules above to the submenu whenever I hover over any LI element with a submenu. So, for example, if I have applied the "youarehere" class to menu item 2, but hover over menu item 3, it shows the item 3 submenu according to the style rules for

#nav li.youarehere ul

and not the default rules under

#nav li ul

.

I hope this makes sense. Does anyone know why IE5.2 Mac might do that?

Thanks
Tom

[DrDoc]

...maybe because the markup is broken? [validator.w3.org]
You have a couple closing tags missing.