✔ CSS Subnavigation

[Webgau]

Servus,

ich habe mir für joomla eine Navigation per CSS erstellt. Leider funktioniert das nicht so ganz, weil sobald das Submenu geöffnet wird, die tags vererbt werden. Um das ganz zu verdeutlichen hier meine seite: Meine Seite -> Dort in der linken Navigation auf "Joomla Überblick" klicken.

Also wie gesagt irgendwo ist dort der Wurm drin, hier noch der CSS Code:

/*** Navigation LINKS***/
#leftcolum
{
	float:left;
	width:20%;
	overflow:hidden;
}

#leftcolum h3
{
	background-image:url(../images/bg_right_h3.jpg);
	background-repeat:no-repeat;
	color:#FFFFFF;
	border:solid 1px #000000;
	height:30px;
	line-height:30px;
	text-indent:20px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	margin-top:0.3em;
	margin-bottom:0.3em;
}

#leftcolum ul 
{
	margin-top: 0.3em;
	margin-bottom:1.0em;
	padding: 0.1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-style:normal;
}
* html #leftcolum ul 
{  /* Korrekturen fuer IE 5.x */
	padding-left: 0;
	padd\ing-left: 0.1em;
}
#leftcolum ul li 
{
    list-style: none;
    margin-top: 0.1em;
	padding-left:0em;
	padding-right:0em;
	padding-bottom:0.1em;
}

#leftcolum ul li ul 
{
	margin: 0.5em 0em 0.5em 0em; padding: 0;
}

#leftcolum ul li ul li 
{
	margin: 0.1em 0;
}

#leftcolum ul li ul li a
{
	border:0em;
	text-indent: 2.0em;
	color:#000000;
	background-image:url(../images/flamme.gif);
	background-repeat:no-repeat;
}

#leftcolum ul li ul li a:hover
{
	border:0em;
	text-indent: 2.5em;
	color:#000000;
	background-image:url(../images/flamme_hover.gif);
	background-repeat:no-repeat;
}

* html #leftcolum ul li ul li 
{  /* Korrektur fuer IE 5.x */
	margin-left: 0.1em;
    ma\rgin-left: 0;
}

#leftcolum ul li a 
{
	display:block;
	text-decoration:none;
    padding: 0.5em;
    border: 1px solid black;
	background-image:url(../images/button_hover.jpg);
	background-repeat:no-repeat;
	color:#FFFFFF;
	text-indent:1.5em;
	background-color:#660000;
}

* html #leftcolum ul li a 
{
	width: 100%;    /* Breitenangabe fuer IE 5.x */
	w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
}

* html #leftcolum ul li ul li a 
{
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 7.8em;  /* Breitenangabe fuer IE 6 */
}

#leftcolum ul li a:hover 
{
	background-image:url(../images/button.jpg);
	text-indent:2em;
	color:#FFFF00;
	background-color:#660000;
}

#leftcolum ul li#current a
{
	text-indent:2em;
	color:#FFFF00;
	background-image:url(../images/button.jpg);
}

Vielen Dank! Grüße Mirko

 

[Maik]

Hi,

die Browser interpretieren diesen Regelblock absolut richtig, denn er gilt in dieser Form für alle Links, die sich innerhalb des Listeneintrags mit der ID #current befinden, also auch für die Links des darin enthaltenden Submenüs:

#leftcolum ul li#current a
{
	text-indent:2em;
	color:#FFFF00;
	background-image:url(../images/button.jpg);
}

Ergo solltest du die ID an den Link übergeben, damit die Regel nur für diesen gilt, und nicht zusätzlich an die Links des nachfolgenden Untermenüs vererbt wird.

#leftcolum ul li a#current
{
	text-indent:2em;
	color:#FFFF00;
	background-image:url(../images/button.jpg);
}

mfg Maik