CSS Menu help?

[onlyteesin]

Hi all! New here! need help with css for menu system!

got a menu system with dynamic created links via magneto system.

Here is my html for the menu!

I need to style the menu system now! but I am having trouble with my css, and targeting each link individual! Please help!

html:-
<div class="nav-container">
<ul id="nav">
<li>
<a href="http://onlyteesin.localhost/">Home</a>
</li>

<li class="level0 nav-1 level-top first">
<a class="level-top" href="http://onlyteesin.localhost/mens.html">
<span>Mens</span>
</a>
</li>


<li class="level0 nav-2 level-top">
<a class="level-top" href="http://onlyteesin.localhost/womens.html">
<span>Womens</span>
</a>
</li>

<li class="level0 nav-3 level-top">
<a class="level-top" href="http://onlyteesin.localhost/newtees.html">
<span>New</span>
</a>
</li>

<li class="level0 nav-4 level-top last">
<a class="level-top" href="http://onlyteesin.localhost/sale.html">
<span>Sale</span>
</a>
</li>
</ul>
</div>


I want to put an image over the links with rollover effect! - i.e i want to target the li class:-

<li class="level0 nav-2 level-top">

Having problems working out the levels or how to do that!

css for far!:-

.level0 nav-3 level-top li { float:left; padding:0px; font-size:14px; font-weight:bold; color:#000; text-transform:uppercase;
background-image:url("navigation.gif"); width:85px;}

.level0 nav-3 level-top li a:hover { color:#FDDD15; background-image:url("navigation.gif"); width:85px;background-position:0 -20px;}


Not working any help please!

[resdog]

You don't need to call all of the classes for that link, you could just call the unique class:

.nav-3 li { float:left; padding:0px; font-size:14px; font-weight:bold; color:#000; text-transform:uppercase;
background-image:url("navigation.gif"); width:85px;}

.nav-3 li a:hover { color:#FDDD15; background-image:url("navigation.gif"); width:85px;background-position:0 -20px;}

If, however, you want to call it specifically by using all of them, you would need to put the class names together:

.level0.nav-3.level-top li { float:left; padding:0px; font-size:14px; font-weight:bold; color:#000; text-transform:uppercase;
background-image:url("navigation.gif"); width:85px;}

.level0.nav-3.level-top li a:hover { color:#FDDD15; background-image:url("navigation.gif"); width:85px;background-position:0 -20px;}