Navigationsproblem

[suit]

Die hmtl Struktur sieht wie folgt aus:

<div class="nav">

warum ist das kein nav-Element?

<ul>
<li class="noline">
<div class="untermenu_a">

Wozu ist das div-Element da?

<ul>
<li>Menupunkt 1</li>
<li>Menupunkt 1</li>
<li>Menupunkt 1</li>
</ul>
</div>
</li>
</ul>
</div>

>   
> Jetzt habe ich eine Klasse (.nav li a:hover{} ) die soweit funktioniert, dass sie die Hintergrundfarbe der einzelnen Unterpunkte des Menüs farbig ändert.  
  
ich sehe keine a-Elemente  
  

> Was mir jetzt noch nicht gelingt, ist die Verkettung mit einer anderen Klasse. Diese habe ich wie folgt definiert:  
>   
> `.navsub{display:none}`{:.language-css}  
  
Elemente dieser Klasse sehe ich nicht - was soll der Selektor bewirken?  
  

> Was ich gerne hätte, ist das bei Mouseover der ersten Klasse die Klasse .navsub sichtbar wird. Ich hatte mir das wie folgt gedacht:  
> ~~~css

.nav li a:hover#navsub{ display:block; }  
  
Jetzt ist plötzlich eine ID?  
  

> .nav li a:hover.navsub{ display:block; }

~~~ beide Varianten funktionieren aber nicht.  
  
Ja, es gibt kein Element mit der Klasse oder ID nachsub - und schon garnicht in einem a-Element  
  

> Kann man das so in der Art lösen?  
  
Also dein Code von oben mal etwas aufgeräumt sollte so aussehen  
  
~~~html
  
<nav>  
	<ul>  
		<li>  
			<a>1</a>  
			<ul>  
				<li>  
					<a>1.1</a>  
					<a>1.2</a>  
					<a>1.3</a>  
				</li>  
			</ul>  
		</li>  
		<li>  
			<a>2</a>  
			<ul>  
				<li>  
					<a>2.1</a>  
					<a>2.2</a>  
					<a>2.3</a>  
				</li>  
			</ul>  
		</li>  
	</ul>  
</nav>  

Die Untermenüs blendest du aus, indem du alle ul-Elemente ausblendest, die sich in li-Elementen befinden

nav li ul { display: none; }

Hat man hingegen grade ein li-Element mit dem Cursor im Visier, blenderst du dieses entsprechend wieder ein.

nav li:hover ul { display: block; }

Guckst du hier: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=Dynamische CSS-Navigation für moderne Browser>