Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 15.12.2010, 14:05
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard Dropdown Navigation - 2. Ebene ein-/ausblenden

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

Geändert von img (17.12.2010 um 00:01 Uhr)
Mit Zitat antworten
Sponsored Links