horizontales Untermenü, Vererbung

[barodscheff]

Hallo Leute,

hier mal ein Problem für die Cracks unter euch. Ich habe eine horizontale Navigation mit einer horizontalen Unternavigation. Ich habe mitlerweile alles so fertig wie ich es wollte, ausser eine Kleinigkeit.

Sowohl der Button der aktuellen Seite als auch der gehoverte button haben ein Hintergrundbild welches wegen der runden Ecken jeweils aus 2 background images besteht.

Wenn ich die Maus nun über ein Punkt fahre und von diesem aus aufs Untermenü fahre, wird der aktuell gehoverte (also der im Untermenü) richtig mit dem background-image dargestellt, aber der obere Punkt von dem ich ausging nicht mehr richtig. Dort wird die falsche Schriftfarbe und nur das eine background-image angezeigt.

Ich hoffe das ganze ist verständlich, wenn nicht könnt ihr euch es ja mit meinem Code selber angucken. Ich glaube es ist ein Problem mit der Vererbung, nur ich weiß nicht wie ich das ändern kann.

Hoffe echt einer versteht das Problem und weiß die Lösung.

Hier die Codes:

HTML

<div id="nav">
<ul>
<li id="current"><a href="#.html">Hauptpunkt 1</a></li>
<li><a href="#.html">Hauptpunkt 2</a>
<ul id="linke">
<li><a href="#.html">Unterpunkt 1</a></li>
<li><a href="#.html">Unterpunkt 2</a></li>
<li><a href="#.html">Unterpunkt 3</a></li>
<li><a href="#.html">Unterpunkt 4</a></li>
<li><a href="#.html">Unterpunkt 5</a></li>
<li><a href="#.html">Unterpunkt 6</a></li>
<li><a href="#.html">Unterpunkt 7</a></li>
</ul>
</li>
<li><a href="#.html">Hauptpunkt 3</a>
<ul id="rechte">
<li><a href="#.html">Unterpunkt 8</a></li>
<li><a href="#.html">Unterpunkt 9</a></li>
<li><a href="#.html">Unterpunkt 10</a></li>
<li><a href="#.html">Unterpunkt 11</a></li>
<li><a href="#.html">Unterpunkt 12</a></li>
<li><a href="#.html">Unterpunkt 13</a></li>
<li><a href="#.html">Unterpunkt 14</a></li>
<li><a href="#.html">Unterpunkt 15</a></li>
<li><a href="#.html">Unterpunkt 16</a></li>
</ul>
</li>
<li><a href=#.html">Hauptpunkt 4</a></li>
<li><a href="#.html">Hauptpunkt 5</a></li>
</ul>
</div>


CSS

#nav {
position: absolute;
top: 100px;
width: 950px;
padding: 8px 0;
margin: 0 auto 90px auto;
background-image: url(navbg.gif);
background-repeat: repeat-x;
}


#nav li {
float: left;
position: relative;
list-style-type: none; /* keine Aufzählungspunkte */
text-decoration: none;
line-height: 1.9;
}


#nav #current {
background: url(navbutton_rechts.png) no-repeat right center;
}

#nav #current a {
background: url(navbutton_links.png) no-repeat left center;
color: black;
}


#nav a {
color: #333;
padding: 11px 12px;
font-size: 11pt;
font-weight: bold;
background-image: none;
}


#nav li:hover,
#nav li:focus {
background: url(navbutton_rechts.png) no-repeat right center;
}

#nav li:active {
background: url(navbutton_rechts.png) no-repeat right center;
}


#nav a:hover,
#nav a:focus {
background: url(navbutton_links.png) no-repeat left center;
color: black;
}

#nav a:active {
background: url(navbutton_links.png) no-repeat left center;
color: black;
}


/* Ab hier Definitionen für horizontales Untermenü */

#nav li ul {
float: left;
display: none;
position: absolute;
top: 28px;
width: 950px;
padding: 0;
background-image: url(unternavbg.gif);
}


#linke {
left: -92px;
}

#rechte {
left: -340px;
}

#nav li ul a {
display: block;
float: left;
font-size: 9pt;
font-weight: bold;
padding: 16px 10px;
}


#nav li:hover ul {
display: block;
}

[Azra]

Ich glaube du meinst so etwas:

Code: Alles auswählen

#nav li:hover > a{background:black;}


Damit bleibt wird der aktive Hauptpunkt angesprochen welcher im :hover Zustand bleibt.

[barodscheff]

DANKE !

Da denkt man, man kennt alles..