problem formatierung aktiver sublisteneintraege

[har1974]

ein durch zend framework generiertes menue funktioniert ansich sehr gut und markiert, wie gewuenscht, alle aktiven eintraege durch <li class="active">. leider passiert es nun aber das er bei mir auch alle links unterhalb dieses listeneintrages als aktiv darstellt. d.h. die ausgabe der listenstruktur ist in ordnung mein css nicht :(
wer kann helfen?

  
<ul class="navigation">  
    <li>  
        <a id="menu-reqList" title="list of alle requests" href="/">List</a>  
    </li>  
    <li class="active ">  
        <a id="menu-reqUser" title="add, change or delete a user" href="/admin/user">User</a>  
        <ul>  
            <li class="active user">  
                <a id="menu-reqNewUser" title="create new user" href="/admin/newuser">new</a>  
            </li>  
            <li class="user">  
                <a id="menu-reqChangeUser" title="change a user" href="/admin/changeuser">change</a>  
            </li>  
            <li class="user">  
                <a id="menu-reqDelUser" title="delete a user" href="/admin/deluser">delete</a>  
            </li>  
        </ul>  
    </li>  
    <li>  
        <a id="menu-reqGroup" href="/admin/group">Group</a>  
    </li>  
    <li class="logout">  
        <a id="menu-logout" href="/login/logout">Logout</a>  
    </li>  
</ul>  

  
ul.navigation  
{  
	position: fixed;  
	margin: 0px 0px 0px 0px;  
	top:0px; right:20px;  
	height: 88px;	  
	display: block;  
	float: right;  
	z-index: 1;  
	  
	border: 0px solid red;  
}  
  
ul.navigation  ul  
{  
	margin: 0;  
	list-style: none;  
}  
  
ul.navigation li  
{  
	display: block;  
	float: left;  
	white-space: nowrap;  
	min-width: 50px;  
	padding-left: 10px;  
}  
  
ul.navigation li.logout  
{  
	padding-left: 75px;  
}  
  
  
ul.navigation li a  
{  
	display: block;  
	padding: 55px 5px 13px 5px;  
	text-decoration: none;  
	color: #fff;  
	font-weight: bold;  
	text-align: center;  
	background: url(../img/bg_t_grey.gif);  
	background-repeat: repeat-x;  
	background-position: bottom;  
	  
	border: 0px solid blue;  
}  
  
* html ul.navigation a {width:1%;}  
  
ul.navigation  li a:hover  
{  
	background: url(../img/bg_menu.gif);  
	background-repeat: repeat-x;  
	background-position: bottom;  
}  
  
ul.navigation  li.active a  
{  
	background: url(../img/bg_t.gif);  
	background-repeat: repeat-x;  
	background-position: bottom;  
}  
  
ul.navigation  li.active a:hover  
{  
	background: url(../img/bg_menu.gif);  
	background-repeat: repeat-x;  
	background-position: bottom;  
}  

[Bobby]

Moin

ul.navigation  li.active a
{
background: url(../img/bg_t.gif);
background-repeat: repeat-x;
background-position: bottom;
}

ul.navigation  li.active a:hover
{
background: url(../img/bg_menu.gif);
background-repeat: repeat-x;
background-position: bottom;
}

  
hier werden alle Links innerhalb eines aktiven Listenelementes angesprochen. Durch Vererbung auch alle Links im Submenu. Hier solltest du eingrenzen auf alle Links direkt unterhalb des aktiven Listenelements. Dies erreicht man in CSS durch ein ">" Zeichen  
  
ul.navigation  li.active > a  
ul.navigation  li.active > a:hover  
  
Gruß Bobby  

-- 
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-  
### Henry L. Mencken ###  
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-  
### Viktor Frankl ###  
  
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)

[har1974]

hier werden alle Links innerhalb eines aktiven Listenelementes angesprochen. Durch Vererbung auch alle Links im Submenu. Hier solltest du eingrenzen auf alle Links direkt unterhalb des aktiven Listenelements. Dies erreicht man in CSS durch ein ">" Zeichen

ul.navigation  li.active > a
ul.navigation  li.active > a:hover

Gruß Bobby

kurz und schmerzlos! funktioniert jetzt wie gewuenscht :)
thx