Navigationsproblem

[Sascha]

Hallo zusammen,

ich habe ein kleines Problem mit einer bestehenden Navigation, die ich gerne um Untermenüs erweitern möchte.

Die hmtl Struktur sieht wie folgt aus:

  
<div class="nav">  
<ul>  
<li class="noline">  
<div class="untermenu_a">  
<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.

Was mir jetzt noch nicht gelingt, ist die Verkettung mit einer anderen Klasse. Diese habe ich wie folgt definiert:

.navsub{display:none}

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

.nav li a:hover#navsub{ display:block; }  
.nav li a:hover.navsub{ display:block; }
~~~ beide Varianten funktionieren aber nicht.  
  
Kann man das so in der Art lösen?

[Fraenk]

Hallo,

<div class="nav">
<ul>
<li class="noline">
<div class="untermenu_a">
<ul>
<li>Menupunkt 1</li>
<li>Menupunkt 1</li>
<li>Menupunkt 1</li>
</ul>
</div>
</li>
</ul>
</div>
[/code]

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

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

  
VG  

[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>

[Matthias Apsel]

Om nah hoo pez nyeetz, suit!

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

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

>   
> Ja, es gibt kein Element mit der Klasse oder ID nachsub - und schon garnicht in einem a-Element  
  
<korinthe>Ja, es gibt kein a-Element mit der Klasse oder ID nachsub</korinthe>  
  
SCNR  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Matthias Apsel]

Om nah hoo pez nyeetz, Sascha!

Hallo zusammen,

ich habe ein kleines Problem mit einer bestehenden Navigation, die ich gerne um Untermenüs erweitern möchte.

Die hmtl Struktur sieht wie folgt aus:

<div class="nav">
<ul>
<li class="noline">
<div class="untermenu_a">
<ul>
<li>Menupunkt 1</li>
<li>Menupunkt 1</li>
<li>Menupunkt 1</li>
</ul>
</div>
</li>
</ul>
</div>

>   
  
Die divs enthalten keine weiteren Elemente, also brauchen sie nichts gruppieren und können folglich weg.  
  
~~~html
<ul id="Navigation">  
  <li><a href="#">Hauptmenüpunkt 1</a>  
    <ul>  
      <li>aktueller Menupunkt 1.1</li>  
      <li><a href="#">Menupunkt 1.2</a></li>  
      <li><a href="#">Menupunkt 1.3</a></li>  
    </ul>  
  </li>  
</ul>

Dann sind die Menüpunkte z.B. wie folgt erreichbar

#Navigation li /* alle Listenelemente */
#Navigation li li /* nur die der zweiten Ebene */

#Navigation li a /* alle Linkelemente */
#Navigation li li a /* Linkelemente der zweiten Ebene */

siehe auch http://forum.de.selfhtml.org/my/?t=208314&m=1416466#m1416466 ff. und vorhergehende

Matthias

[Felix Riesterer]

Lieber Matthias Apsel,

lass mich etwas präzisieren...

#Navigation li li /* nur die der zweiten Ebene */

_ab_ der zweiten Ebene

#Navigation li li a /* Linkelemente der zweiten Ebene */

_ab_ der zweiten Ebene
Liebe Grüße,

Felix Riesterer.