nun bin echt mal ratlos, obwohl es nur um css geht:
Link folgt am Ende.
Es geht um ein Drop-Down- oder auch Klapp-Menü ... allerdings mit zwei horizontalen Ebenen. Nicht wie das mitgeliferte, bei dem ja nur die oberste Ebene horizontal ist.
Im Prinzip funktioniert alles, bis auf einen Schönheitsfehler. Wenn das Dropdown erscheint und man möchte mit der Maus einen Unterpunkt ansteuern, geht der Hover-Status des Hauptpunktes flöten (irdenwie ja auch lögisch).
Dennoch: gibt es einen css-Trick, diesen hover status auch beim Navigieren des jeweiligen Dropdown-Punktes zu erhalten?
Zudem gibt es noch einen Sonderwunsch : currentpage ist wie man sieht auch blau ... da gibt es aber den Wunsch, dass, sobald man auf einem anderen Punkt hover aktiviert, der currentpage - Status verschwindet, so nur jewiels ein Punkt zu selben Zeit blau ist...
Zuviel verlangt? ... ich nehme mal an, ohne JavaScript ist da zumindest beim letzen Wunsch nix zu machen, was?
Template: simple navigation (das css-menu horizontal + column hats nicht gebracht)
LInk: entfernt
Und die Menü-css:
Code: Select all
#menu{
width: 940px;
height: 35px;
background: #CA1518;
}
#menu ul{
list-style-type: none;
margin: 0 0 0 0;
padding:0 0 0 0;
position: absolute;
display:block;
}
#menu li {
float: left;
margin-left: -3px;
border-left: 3px solid #fff;
height: 36px;
}
#menu li ul {
position: absolute;
left: 4px; top:40px; width:935px; height: 20px;
background:#00366E;
z-index: 999;
display: none;
}
#menu li:hover ul {
display: block;
background: #00366E;
}
#menu li ul li {
float: left;
margin-left: 3px;
border: 0;
padding: 0;
}
#menu li ul a {
margin: 0px;
font-size: 90%;
padding: 0 15px 0 0;
}
#menu a.currentpage {
background: #00366E;
}
#menu a {
color: #FFF;
font-size: 105%;
font-weight: bold;
text-decoration: none;
display:block;
padding: 10px 9px 10px 6px;
}
#menu a:hover {
background: #00366E;
}
#menu a.currentpage {
background: #00366E;
}
#menu a.activeparent {
background: #00366E;
}
#menu a.currentpage:hover {
background: #00366E;
}
#menu a.activeparent:hover {
background: #00366E;
}
...
