Hallo zusammen,
ich habe eine 2-stufige Navigation:
NLP
Wenn ein Untermenüpunkt aktiv ist, soll das Untermenü stehen bleiben. Beim Hover über einen Hauptmenüpunkt soll das aktive Untermenü ausgelendet werden und das entsprechende beim Hover auf einen Hauptmenüpunkt eingeblendet werden.
Jedoch hab ich jetzt ein Konflikt im CSS, da das aktive Untermenü nicht mehr angeklickt werden kann.
Hat einer eine Idee wie ich das eleganter Lösen könnte? Evtl. ist mein Denkansatz auch falsch
Code:
/*.................. NAVI ..................*/
#navi ul{ /* Menü 1. Ebene */
list-style:none;
font-family:verdana;
font-size:11px;
text-transform:uppercase;
margin:0px;
padding:0;
position:absolute;
margin:146px 0 0 10px;
z-index:9999;
}
#navi ul li { /* Submenü 1. Ebene */
float:left;
line-height:35px;
margin:0;
margin-right:10px;
}
#navi a{ /* Links 1. Ebene*/
display:block;
padding:10px 8px 5px 8px;
height:36px;
color: #333939;
text-decoration:none;
}
#navi li:hover a{
background: url(/tl_files/playground/theme/bg_navi_hover.png) center top no-repeat;
text-decoration:underline;
color:#33b8cc;
}
#navi li .active, #navi li .trail {
background: url(/tl_files/playground/theme/bg_navi_active.jpg) center top no-repeat;
color:#fff;
font-weight:bold;
display:block;
padding:10px 8px 5px 8px;
height:41px;
}
#navi ul li ul { /* Menü 2. Ebene ausblenden */
display:none;
top:47px;
margin:0;
padding-top:6px;
text-transform:none;
}
#navi ul li:hover ul{ /* Submenü 2. Ebene einblenden */
display:block;
}
#navi ul li ul li { /* Submenü 2. Ebene */
float:none;
border-left:1px solid #efefef;
border-right:1px solid #efefef;
border-bottom:1px solid #efefef;
line-height:35px;
background:#fff;
float:left;
margin-right:0;
}
#navi ul li ul li a, #navi li:hover ul li a{ /* Links 2. Ebene */
padding:0 5px 5px 5px;
height:30px;
color:#333939;
text-decoration:none;
}
#navi li ul .active, #navi li ul li .trail { /* Aktiver Link 2. Ebene */
height:30px;
background:#fff;
padding:0 5px 5px 2px;
color:#33b8cc;
}
#navi li.trail ul { /* Aktives Submenü eingeblendet lassen*/
display:block
}
#navi ul:hover li.trail ul { /* Ausblenden aktives Submenü wenn hover über anderer Haupt-Menüpunkt*/
display:none
}
#navi ul li ul li a:hover {
text-decoration:underline;
color:#33b8cc;
}
Danke im Voraus,
Grüße img