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;
}