aktiver Untermenüpunkt wird nicht korrekt angezeigt

**Terracotta** · 18.05.2009 17:41

hallo!

Hab ein vertikales Menü erstellt mit einer 2 Ebene und möchte einerseits den aktiven Hauptmenüpunkt und den ausgewählten Untermenüpunkt hervorheben.

Aber verflixterweise hebt er mir nicht nur den Hauptmenüpunkt wie gewollt sondern auch ALLE Untermenüpunkte hervor. Hover sollte passen. Dennoch.

Hab keinen Plan mehr.

thx

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navi Vertikal mit 2 Ebene</title>

<link href="navi_vertikal_21.css" rel="stylesheet" type="text/css" />
</head>

<body id="seite0201">

	<div id="container">
    
    		<div id="navibox">
            
            	<ul>
                       <li id="navi01"><a href="navi_vertikal_2.html">Startseite</a></li>
                       <li id="navi02"><a href="navi_vertikal_2_Seite02.html">Seite&nbsp;02</a>
                       <ul>
                          <li id="navi0201"><strong>Seite 0201</strong></li>
                          <li id="navi0202"><a href="navi_vertikal_2_Seite0202.html">Seite 0202</a></li>
                          <li id="navi0203"><a href="navi_vertikal_2_Seite0203.html">Seite 0203</a></li>
                          <li id="navi0204"><a href="navi_vertikal_2_Seite0204.html">Seite 0204</a></li>
                       </ul>   
                       </li>
                       <li id="navi03" title="Infos zu Seite 03"><a href="navi_vertikal_2_Seite03.html">Seite&nbsp;03</a></li>
                       <li id="navi04" title="Infos zu Seite 04"><a href="navi_vertikal_2_Seite04.html">Seite 04</a></li>
                </ul>
                
            </div><!--ende navibox-->
    
    </div><!--ende container-->

</body>
</html>

HTML-Code:

body {
		padding: 0;
		margin: 0;
		background-color: #ffffff;
}

#container {
		width: 600px;
		height: 600px;
		border: 1px solid black;
		margin: 100px auto;
		padding: 0px;
		background-color: #FFFFFF;
}

#navibox {
		/*background-color: #CCCCCC;*/
		background-color: transparent;
		position: relative;
		top: 0;
		left: 10px;
		margin: 0;
}

#navibox li {
		list-style: none;
		background-color: transparent;
		padding: 0;
		margin: 0;
		/*width: 200px;*/
		text-align: center;
}

#navibox ul {
		background-color: transparent;
		padding: 0;
		margin: 0;
}
/*
#navibox a {
		text-decoration: none;
		width: 198px; /*nur für IE 6 
		padding: 3px 4px;
		margin: 1px 0 0;
		width: 200px;
		
		border-radius: 5px;
		-moz-border-radius: 5px;
}*/
		
/*Liste in Ebene 2*/

#navibox li ul {
  font-size: 90%; 
  /*border-top: none; 
  border-bottom: none; */
  margin: 0; 
  
}

#navibox li li {
  
  padding: 0; 
  margin: 0; 
}



/* Gestaltung Hyperlinks fuer Ebene 1 und Strong */
  
#navibox a,
#navibox strong {
   display: block; 
   width: 200px;
   font-weight: normal; 
   text-decoration: none; 
   background-color: #FFFFFF; 
   color: #000000; 
   padding: 3px 4px;
   margin: 1px 0 0; 
   border: 1px solid #990000;
    
   border-radius: 5px;
   -moz-border-radius: 5px;    
}


/* Hover und Focus */

#container #navibox a:hover,
#container #navibox a:focus {  
   background-color: #990000; 
   color: white; 
}



/* Gestaltung der Links fuer Ebene 2 */

#navibox li li a,
#navibox li li strong {
  background-color: #FFFFFF; 
  color: #000000;
  width: 150px;
  margin: 1px 0 0 50px;
}



/* Aktive Menuepunkte hervorheben */

#startseite #navi01 strong,
#seite02 #navi02 strong, 
#seite0201 #navi0201 strong,
#seite0202 #navi0202 strong,
#seite0203 #navi0203 strong,
#seite0204 #navi0204 strong, 
#seite03 #navi03 strong,
#seite0302 #navi0302 strong, 
#seite04 #navi04 strong {
   background: #990000;  
   color: #FFFFFF; 
} 



/* Hauptmenuepunkt hervorheben */

#seite0201 #navi02 a,
#seite0202 #navi02 a, 
#seite0302 #navi03 a {
  background-color: #990000; 
  color: #FFFFFF; 
}

navi_vertikal_21.txt

navi_vertikal_2_Seite0201.txt

**Terracotta** · 19.05.2009 11:35

Vielleicht hab ichs schlecht erklärt.

Seite01
Seite02

Seite0201

Seite0202

Seite0203

Seite03

Seite0301

usw.

Der Hovereffekt funktioniert im kompletten Menü, auch Submenü, wenn ich nicht die "aktiven" Hauptmenüpunkte wie Seite01, Seite02 extra auszeichnen möchte.

Will ich jedoch den Hauptmenüpunkt, zb. Seite02 kennzeichnen wenn ich drauf klicke und sich das Submenü öffnet, ist der Hovereffekt im Submenü dahin. Bei den Hauptmenüpunkte funktioniert der Hovereffekt jedoch weiterhin.

Will bei Klick auf Seite02, dass sich ein Subemenü öffnet, dort der gleiche Hovereffekt wirkt wie auf die Hauptmenüpunkte. Der Hauptmenüpunkt aber einen Extrazustand bekommt.

**hero-master** · 20.05.2009 12:51

Moin

Zitat von Terracotta

Aber verflixterweise hebt er mir nicht nur den Hauptmenüpunkt wie gewollt sondern auch ALLE Untermenüpunkte hervor. Hover sollte passen. Dennoch.

ich hoffe ich habe deine Problematik in Thread 1 richtig verstanden. Demnach liegt dein Problem an der Auszeichung:

Code:

#seite0201 #navi02 a,
#seite0202 #navi02 a,
#seite0302 #navi03 a {
  background-color: #990000;
  color: #FFFFFF;
}

Du gibst jetzt jedem Link in dem Listenpunkt mit der ID "navi02" den roten BG und die weiße Farbe. Darunter zählen ja auch die Links im Submenu, weil deine Liste des Untermenus in dem Listenpunkt mit der ID "navi02" liegt:

HTML-Code:

<li id="navi02"><a href="navi_vertikal_2_Seite02.html">Seite&nbsp;02</a>
                       <ul>
                          <li id="navi0201"><strong>Seite 0201</strong></li>
                          <li id="navi0202"><a href="navi_vertikal_2_Seite0202.html">Seite 0202</a></li>
                          <li id="navi0203"><a href="navi_vertikal_2_Seite0203.html">Seite 0203</a></li>
                          <li id="navi0204"><a href="navi_vertikal_2_Seite0204.html">Seite 0204</a></li>
                       </ul>
                       </li>

Um das zu verhindern müsstest du dem Link eine ID zuweisen und nicht dem ganzen Listenpunkt

**Terracotta** · 20.05.2009 17:08

Danke!

D.h. die Links im Submenü erben die BG und Color vom #navi02 a. Obwohl die Links im Submenü eine eigene id haben.

Eine wenig elegante Lösung ist im .css die Links im Untermenü zu überschreiben.

#seite0201 #navi0202 a,
#seite0201 #navi0203 a,
#seite0201 #navi0204 a {
background-color: white;
color: black;
}

Weisst du eine schönere und schlankere Lösung?

**wildmieze** · 20.05.2009 19:40

hmm .. vielleicht kannst du das überschreiben folgendermaßen "kürzen":

#seite0201 #navi02 ul li a {
background-color: white;
color: black;
}

keine ahnung, ob das alle broswer mitmachen, aber nen versuch wärs wert ..

zur Startseite vom TP

Thema: aktiver Untermenüpunkt wird nicht korrekt angezeigt

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

aktiver Untermenüpunkt wird nicht korrekt angezeigt

Ähnliche Themen

frameset wird nicht korrekt im ie angezeigt

Footer wird nicht immer korrekt angezeigt

Tabellenzeilenhöhe wird nicht korrekt angezeigt

Farben werden nicht korrekt angezeigt...

entwurf nicht korrekt angezeigt

Aktive Benutzer

Aktive Benutzer