hover effekt funktioniert bei menü nicht

[frufunger]

Hallo,

ich wollte ein drop down Menü per CSS realisieren und kann im Code einfach nicht finden warum die Unterlisten nicht erscheinen...

<div  class="nav">
    <ul><li><a href="">1</a></li>
        <ul>
        	<li><a href="">1.1</a></li>
          	<li><a href="">1.2</a></li>
          	<li><a href="">1.3</a></li>
        </ul> 
     </ul>
     <ul><li><a href="">2</a></li>
        <ul>
        	<li><a href="">2.1</a></li>
          	<li><a href="">2.2</a></li>
          	<li><a href="">2.3</a></li>
                <li><a href="">2.4</a></li>
        </ul> 
     </ul>    
     <ul><li><a href="">3</a></li></ul> 
     <ul><li><a href="">4</a></li></ul> 
     <ul><li ><a href="">5</a></li>
        <ul>
        	<li ><a href="">5.1</a></li>
          	<li ><a href="">5.2</a></li>
          	<li ><a href="">5.3</a></li>
                <li ><a href="">5.4</a></li>
        </ul>
        </ul> 
     <ul><li><a href="">6</a></li></ul> 
  	</ul>
    </div>

dazu dieser CSS Code:

.nav {
	text-align: center;
	clear: both;
	float: left;
	width: 100%;
	overflow: hidden;
	display: block;
	list-style-type: none;
	margin-bottom: -40px;
	padding: 0 40px;
}
.nav ul {
	float: left;
	position: relative;  
	list-style-type: none;
}
.nav a{
	text-decoration: none; 
	display: block; 
	text-align: center; 
}

.nav a:hover{
	color:#FF0;	
}

.nav li {
	position:relative;
	margin-right:50px;
	margin-top: 10px;
}

.nav ul ul{
	display:none;	
	z-index:2;
}

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

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

Danke für jede Hilfe.

 

[SpiceLab]

Ein CSS-Fehler liegt hier auch nicht vor. Vielmehr ist die HTML-Syntax des Listenelements (<ul> & <li>) nicht regelkonform, was den Funktionsausfall zur Folge hat.

Grundsätzlich wird eine unsortierte Liste auf diese Weise ausgezeichnet:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Und das erweiterte Markup für ein Menü mit Untermenüebenen, die durch nachfolgende <ul>-Tags repräsentiert werden, stellt sich so dar:

<div class="nav">
  <ul>
    <li>
      <a href="">1</a>
      <ul>
        <li><a href="">1.1</a></li>
        <li><a href="">1.2</a></li>
        <li><a href="">1.3</a></li>
      </ul> 
    </li>
    <li>
      <a href="">2</a>
      <ul>
        <li><a href="">2.1</a></li>
        <li><a href="">2.2</a></li>
        <li><a href="">2.3</a></li>
        <li><a href="">2.4</a></li>
      </ul> 
    </li>    
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li>
      <a href="">5</a>
      <ul>
        <li><a href="">5.1</a></li>
        <li><a href="">5.2</a></li>
        <li><a href="">5.3</a></li>
        <li><a href="">5.4</a></li>
      </ul>
    </li> 
    <li><a href="">6</a></li>
  </ul>
</div>

Nachtrag: Die float:left-Regel für <ul> ist nun stattdessen auf <li> anzuwenden, damit die Hauptmenüpunkte weiterhin nebeneinander erscheinen.

 

[frufunger]

Super danke, ich dachte mir schon das ich an der falsche Baustelle war.
Ich hab aber schon direkt das nächste Problem:
Wenn ich das verschieben von anderen Elementen durch position:absolute für die Unterliste verhindern will funktioniert der Effekt nicht mehr?