you undo the damage for the second level be resetting it all .
you use code that IE6 will have trouble with:
.menu>li {...} This selector will only affect <li>s that are a direct child of somethign with a class="menu".
I prefer this method as I know I will need something to fix the lack of :hover support in IE6 for drop down menus anyway and IE7.js fixes both in one go.
you give the first level a class and target that:
Code:
<ul class="menu">
<li class="firstlevel">primo <ul>
<li>one</li>
<li>two</li>
</ul> </li>
<li class="firstlevel">secundo <ul>
<li>three</li>
<li>four</li>
</ul> </li> </ul>
and the CSS then becomes:
.menu .firstlevel {...}
ugly solution if you ask me.
hope this clarifies things a bit
Bookmarks