css menue mit Listen inactive

[moon]

Hallo,

ich habe ein problem
ich habe ein Rollover menü das funktioniert auch soweit aber ich habe ein Problem
ich habe einen Punkt
Hunde

und die Untermenüs Rassen, Futter und Tricks.
Wenn ich jetzt Hunde als Active makiere werden auch alle untermüs active angezeigt wie kann ich jetzt die untermenüs so definieren das sie nicht active sind und ihre rollover funktion behalten?

mein HTML Code:

<ul id="verticalmenu" class="glossymenu">

<li><a href="tier.html" >Tiere</a></li>

<li id="active"><a href="hunde.html">Hunde</a></li>
        <ul>
        <li><a href="rassen.html">Rassen</a></li>
        <li><a href="futter.html">Futter</a></li>
        <li><a href="tricks.html">Tricks</a></li>
        </ul>

......(hab noch mehr menü punkte aber um diese geht es
</ul

soo und hier mein CSS dazu

.glossymenu, .glossymenu li ul{ /*Hauptmenue*/
list-style-type: none;
margin: 0;
margin-top:0px;
padding: 0;
width: 185px;
padding-top:51px;
}

.glossymenu li{
position: relative;
z-index:2;
}

.glossymenu li a{
background: url(Bilder/menue.jpg)repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 18px;
text-decoration: none;
border:1px solid white;
text-align:left;
}

.glossymenu li ul{ /*Ausklapp menue*/
position: absolute;
width: 190px;
left: 0;
top: -58;
margin-top:-77px;
display: none;
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul a{
width: 180px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover {
background-image:url(Bilder/menue_h.jpg);
}

#active a{
background-image:url(Bilder/menue_h.jpg);
color: #ffffff;
}

ich hoffe ihr könnt mir da Helfen