Frage stellen
habe mir ein kleines Horizontales Menü geschrieben, das wiederum beim :hover auf einen Hauptpunkt ein horizontales-Submenü einblendet. Soweit funktioniert das ganze auch ganz gut. Eine Kleinigkeit stört mich aber noch:
Wenn ich mit :hover über einen Hauptpunkt ein untermenü öffne, ändert sich der Hintergrund des Hauptpunktes. Wechsle mit der Maus in das Untermenü, wird der Hovereffekt vom Hauptpunkt wieder ausgeblendet.
Gibt es irgendeine Möglichkeit, den Hover-Effect vom Hauptpunkt stehen zu lassen?
Hier der CSS-Code:
- Code: Alles auswählen
/***** Hauptmenü *****/
div#hauptmenu {
position: relative;
left: 0;
top: 0;
text-align: left;
width: auto;
height: 15px;
margin-top:196px;
}
ul.menu-nav {
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
float:left;
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
}
ul.menu-nav li {
width:auto;
float:left;
height:15px;
line-height:15px;
display:inline;
overflow:hidden;
border-right: 1px solid #0055A0;
}
ul.menu-nav li:last-child{
border: none;
}
ul.menu-nav li a:link, ul.menu-nav li a:visited {
text-align:center;
display:block;
color: #0055A0;
margin:0;
padding:0 10px 0 10px;
}
ul.menu-nav li.active a:link, ul.menu-nav li.active a:visited {
color: #fff;
background-color: #0055A0;
}
ul.menu-nav li a:hover{
color: #fff;
background-color: #0055A0;
}
/***** ENDE Hauptmenü *****/
/***** Hauptuntermenü *****/
div#untermenu {
position: relative;
left: 0;
top: 0;
text-align: left;
width: auto;
height: 13px;
margin-top:0px;
padding-top: 4px;
padding-left: 84px;
}
ul.menu-nav li.parent ul {
visibility: hidden;
position:absolute;
top: 0;
left:0;
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
margin-top: 15px;
float:left;
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
z-index: 10;
}
ul.menu-nav li.active ul, ul.menu-nav li.parent:hover ul {
visibility: visible;
}
ul.menu-nav li.parent ul li {
width:auto;
float:left;
padding: 3px 0 3px 0;
height:15px;
line-height:15px;
display:inline;
overflow:hidden;
border-right: 1px solid #BEBEBE;
}
ul.menu-nav li.parent ul li:last-child{
border: none;
}
ul.menu-nav li.parent ul li a:link, ul.menu-nav li.parent ul li a:visited {
text-align:center;
display:block;
color: #BEBEBE;
margin:0;
padding:0 10px 0 10px;
}
ul.menu-nav li.parent ul li.active a:link, ul.menu-nav li.parent ul li.active a:visited {
color: #fff;
}
ul.menu-nav li.parent ul li a:hover {
color: #fff;
}
/***** ENDE Hauptuntermenü *****/
Hier noch ein Auszug aus dem HTML des Menüs:
- Code: Alles auswählen
<div id="hauptmenu">
<ul class="menu-nav">
<li id="current" class="active item27"><a href="/index.php?option=com_content&view=category&layout=aktuell&id=45&Itemid=27"><span>Aktuell</span></a></li>
<li class="item2"><a href="/index.php?option=com_content&view=article&id=86&Itemid=2"><span>Das Versorgungswerk</span></a></li>
<li class="parent item41"><a href="/index.php?option=com_content&view=frontpage&Itemid=41"><span>Informationen</span></a>
<ul>
<li class="item34"><a href="/index.php?option=com_content&view=category&layout=sp53&id=42&Itemid=34"><span>Mitglieder</span></a></li>
<li class="item18"><a href="/index.php?option=com_content&view=category&layout=sp53&id=43&Itemid=18"><span>Absolventen/Studenten</span></a></li>
<li class="item28"><a href="/index.php?option=com_content&view=category&layout=sp53&id=41&Itemid=28"><span>Rentner</span></a></li>
<li class="item29"><a href="/index.php?option=com_content&view=category&layout=sp53&id=44&Itemid=29"><span>Arbeitgeber</span></a></li>
</ul>
</li>
<li class="item50"><a href="/index.php?option=com_content&view=category&layout=sp53&id=34&Itemid=50"><span>Fragen und Antworten</span></a></li>
<li class="item48"><a href="/index.php?option=com_content&view=category&layout=sp44&id=35&Itemid=48"><span>Downloads</span></a></li>
<li class="item53"><a href="/index.php?option=com_content&view=article&id=87&Itemid=53"><span>Rentenrechner</span></a></li>
</ul>
</div>
