Problem mit 2 Navigationen und active Element

[Folia-Cut]

Hallo,

ich habe ein Problem beim Aufbau meiner Navigation und komme einfach nicht weiter.

meine Seite ist "http://www.folia-cut.de/css/" wenn ich dort oben Produkte anwähle bleibt es aktiv, sobald ich aber dann in der zweiten navigation einen anderen menüpunkt auswähle ist das produkt element nicht mehr aktiv. wie bekomme ich das hin?

Hier der CSS meiner Hauptnavigation

#header .mod_navigation
{
	width:420px;
	top:0;
	left:560px;
	position:absolute;
	z-index:1000;
}

#header .mod_navigation ul
{
	margin:0;
	padding:0;
	list-style-type:none;
}

#header .mod_navigation li
{
	float:left;
	margin:0;
	padding:0;
}

#header .mod_navigation a,
#header .mod_navigation span
{
	width:105px;
	height:115px;
	display:block;
	background-repeat:none;
	text-indent:-3000px;
}

#header .mod_navigation .startseite a,
#header .mod_navigation .startseite a:link,
#header .mod_navigation .startseite a:visited
{
	background:url(tl_files/buttons/buttons.png) no-repeat top left;
}

#header .mod_navigation .startseite a:hover,
#header .mod_navigation .startseite a:focus,
#header .mod_navigation .startseite a:active,
#header .mod_navigation .startseite span
{
	background:url(tl_files/buttons/buttons.png) no-repeat 0 -115px;
}

#header .mod_navigation .produkte a,
#header .mod_navigation .produkte a:link,
#header .mod_navigation .produkte a:visited
{
	background:url(tl_files/buttons/buttons.png) -105px top no-repeat;
}

#header .mod_navigation .produkte a:hover,
#header .mod_navigation .produkte a:focus,
#header .mod_navigation .produkte a:active,
#header .mod_navigation .produkte span
{
	background:url(tl_files/buttons/buttons.png) -105px bottom no-repeat;
}

#header .mod_navigation .anfahrt a,
#header .mod_navigation .anfahrt a:link,
#header .mod_navigation .anfahrt a:visited
{
	background:url(tl_files/buttons/buttons.png) no-repeat -210px 0;
}

#header .mod_navigation .anfahrt a:hover,
#header .mod_navigation .anfahrt a:focus,
#header .mod_navigation .anfahrt a:active,
#header .mod_navigation .anfahrt span
{
	background:url(tl_files/buttons/buttons.png) no-repeat -210px -115px;
}

#header .mod_navigation .kontakt a,
#header .mod_navigation .kontakt a:link,
#header .mod_navigation .kontakt a:visited
{
	background:url(tl_files/buttons/buttons.png) no-repeat -315px 0;
}

#header .mod_navigation .kontakt a:hover,
#header .mod_navigation .kontakt a:focus,
#header .mod_navigation .kontakt a:active,
#header .mod_navigation .kontakt span
{
	background:url(tl_files/buttons/buttons.png) no-repeat -315px -115px;
}


und hier meiner 2. Navigation (rechts)

h6.unternav
{
	width:90%;
	display:none;
	margin:0;
	padding:3px 0 3px 10px;
	background-color:#FFFFFF;
	font-family:fantasy;
	font-weight:bold;
	font-size:100%;
	color:#444444;
	border-bottom-color: #888888;
	border-bottom-style: solid;
	border-bottom-width: 4px;
	border-top-color: #DDDDDD;
	border-top-style: solid;
	border-top-width: 2px;
}

.unternav
{
	width:100%;
	position:relative;
	float:left;
	margin:0 0 20px;
	font-size:11px;
	list-style-type:none;
	border-top-color: #E0E2E5;
	border-top-style: solid;
	border-top-width: 1px;
}

.unternav ul
{
	margin:0;
	padding:0;
	list-style-type:none;
}

.unternav li
{
	width:100%;
	float:left;
	margin:0;
	padding:0;
}

.unternav a,
.unternav strong,
.unternav span
{
	display:block;
	padding:0 10 0 0;
	line-height:20px;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
	border-bottom-color: #E0E2E5;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.unternav a,
.unternav a:visited
{
	color:#404040;
}

.unternav li span
{
	display:block;
	font-weight:bold;
	border-bottom-color: #E0E2E5;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.unternav li.active
{
	background-color:#F0F1F2;
	font-weight:bold;
	color:#404040;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li a,
.unternav li strong,
.unternav li span
{
	width:210px;
	padding-left:10px;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li a:focus,
.unternav li a:hover,
.unternav li a:active,
.unternav li a.trail
{
	background-color:#F0F1F2;
	font-weight:bold;
	color:#404040;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li a.has_active
{
	font-weight:bold;
}

.unternav li ul li a,
.unternav li ul li strong,
.unternav li ul li span
{
	width:200px;
	padding-left:20px;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li ul li a,
.unternav li ul li a:visited
{
	background-color:#FFFFFF;
	color:#404040;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li ul li a:focus,
.unternav li ul li a:hover,
.unternav li ul li a:active,
.unternav li ul li a.trail
{
	background-color:#F0F1F2;
	color:#404040;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li ul li ul li a,
.unternav li ul li ul li strong,
.unternav li ul li ul li span
{
	width:130px;
	padding-left:30px;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li ul li ul li a,
.unternav li ul li ul li a:visited
{
	background-color:#FFFFFF;
	color:#404040;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li ul li ul li a:focus,
.unternav li ul li ul li a:hover,
.unternav li ul li ul li a:active,
.unternav li ul li ul li a.trail
{
	background-color:#F0F1F2;
	color:#404040;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li ul li ul li ul li a,
.unternav li ul li ul li ul li strong,
.unternav li ul li ul li ul li span
{
	width:120px;
	padding-left:40px;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li ul li ul li ul li a,
.unternav li ul li ul li ul li a:visited
{
	background-color:#FFFFFF;
	color:#404040;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

.unternav li ul li ul li ul li a:focus,
.unternav li ul li ul li ul li a:hover,
.unternav li ul li ul li ul li a:active,
.unternav li ul li ul li ul li a.trail
{
	background-color:#F0F1F2;
	color:#404040;
	-moz-text-blink: none;
	-moz-text-decoration-color: -moz-use-text-color;
	-moz-text-decoration-line: none;
	-moz-text-decoration-style: solid;
}

[MacKP]

Hallo Folia-Cut,
dafür bekommen diese Elemente dann die Klasse .trail. Muss dann genau so formatiert werden wie activ.
Bei weiteren Fragen dazu bitte die Suche benutzen (das Thema wurde schon einige male ausführlich durchgegangen).

Viele Grüße

[Folia-Cut]

Danke für die antwort ja die suche habe ich bereits mehmals verwendet jedoch weiß ich nicht wo ich das einsetzen muss. Anstatt span oder anstatt :active??? Deswegen hätte ich den code eingesetzt! Und ob ich das bei der oberen navigation oder unteren nsvigation einsetzen muss?

[MacKP]

Das was du in der 2. Navi gemacht hast -> .unternav li ul li a.trail
musst du auch in der ersten Navi machen. Ich seh da aktuell nichts von .trail

Viele Grüße

[tblumrich]

Gemeint ist:

#header .mod_navigation .produkte a.trail

Das setzt du genau da hin, wo auch der aktive (und auch focus, hover usw...) Hauptmenüpunkt definiert wird.

Gruß
Thomas

[Folia-Cut]

Super vielen dank hat prima geklappt!!