Menüprobleme mit CSS

Schengo · 20.08.2007, 14:39

Hallo zusammen.

Ich habe eine Navigation, bei der alle Ebenen horizontal gargestellt werden sollen.

Zu sehen ist erstmal nur Ebene 1 und beim hover der einzelnen Punkte soll sich unter dem jeweiligen Menüpunkt wieder eine horizontale Ebene öffnen. Das ganze auch dann bei weiteren Unterebenen.

Hier erstmal der Link : http://www.die-supahelden.de/test/menu/test_menu.htm

Das Problem an der Geschichte ist, dass sich beim hover der Punkte der ersten Ebene alle Unterebenen öffnen, und diese dann linksbündig zum Punkt der ersten Ebene sind.

Hier der HTML-Code

HTML-Code:

<html>
<head>
<title></title>
<link rel=stylesheet type="text/css" href="menu.css">
</head>

<body>
<div class="menu">
<ul>
   <li><a>Ebene 1</a>
     <ul>
      <li><a>Ebene 1.1</a>
        <ul>
         <li><a>Ebene 1.1.1</a></li>
         <li><a>Ebene 1.1.2</a></li>
         <li><a>Ebene 1.1.3</a></li>
        </ul>
      </li>
      <li><a>Ebene 1.2</a>
        <ul>
         <li><a>Ebene 1.2.1</a></li>
         <li><a>Ebene 1.2.2</a></li>
        </ul>
      </li>
   </ul>
   </li>
   
   <li><a>Ebene 2</a>
     <ul>
      <li><a>Ebene 2.1</a></li>
      <li><a>Ebene 2.2</a></li>
      <li><a>Ebene 2.3</a></li>
      <li><a>Ebene 2.4</a>
        <ul>
        <li><a>Ebene 2.4.1</a></li>
        <li><a>Ebene 2.4.2</a></li>
        <li><a>Ebene 2.4.3</a></li>
        <li><a>Ebene 2.4.4</a></li>
        <li><a>Ebene 2.4.5</a></li>
        </ul>
      </li>
     </ul>
   </li>
   
   <li><a>Ebene 3</a>
     <ul>
      <li><a>Ebene 3.1</a></li>
      <li><a>Ebene 3.2</a></li>
      <li><a>Ebene 3.3</a></li>
      <li><a>Ebene 3.4</a></li>
     </ul>
   </li>
   
   <li><a>Ebene 4</a>
     <ul>
      <li><a>Ebene 4.1</a></li>
      <li><a>Ebene 4.2</a></li>
     </ul>
   </li>
   
   <li><a>Ebene 5</a>
     <ul>
      <li><a>Ebene 5.1</a></li>
     </ul>
   </li>
</ul>
</div>
</body>
</html>

und hier die CSS-Datei menu.css

Code:

ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	clear: both;
	}
	
ul a
	{
	text-decoration: none;
	color: #000000;
	}
	
ul a:hover 
	{
	text-decoration: none;
	color: #FF0000;
	}

ul li 
	{
	margin: 0px 10px 0px 0px;
	float: left;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-weight:bold;
	padding: 0px;
	cursor: pointer;
	white-space: nowrap;
	color: #FFFFFF;
	}

ul ul 
	{
	position: absolute;
	display: none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	z-index: 10000;
	}

ul ul li 
	{
	float: none;
	margin: 0px;
	display:inline;
	padding: 0px;
	color: #70777D;
	}
	
ul ul li a, ul ul li a:active, ul ul li a:link, ul ul li a:visited 
	{
	color: #000000;
	}
	
ul li:hover ul 
	{
    	display: block;
  	}

Ich weiß, dass ich mit ul li:hover ul die untere Ebene anspreche, wenn ich drüberfahre, allerdings weiß ich nicht, warum alle Ebenen mit angezeigt werden.

Eigentlich ist doch display ein Element, dass nicht weitervererbt wird, oder?

Danke schonmal im voraus.

Gruß Schengo

Mich@el · 20.08.2007, 17:34

Hi Schengo!
Ich habe auch noch einen Fehler im IE7. Da verdecken Deine Drop-Line Menüs die Hauptmenüs. D.h. sie werden nicht unterhalb angezeigt.
Im FF sieht´s gut aus.

Hier auch ein paar Beispiele von Stu´s Seite. Schau´s Dir mal im Quelltext an. Evtl. findest Du den Haken bei Deinem Menü.

1.
2.
3.

Grüße
Michael

Schengo · 21.08.2007, 17:03

@ Mich@el
Danke für deine Antwort. Auf Stu's Seite habe ich mich auch schonmal rumgetrieben, aber leider habe ich jetzt darauf keine Antwort für bzw. gegen mein Problem gefunden.

Ist das Problem im IE7 immernoch vorhanden?

Ich habe den Code nochmal etwas modifiziert:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<link rel=stylesheet type="text/css" href="menu.css">
</head>

<body>
<div class="menu">
<ul class="nav">
   <li><a>Punkt 1</a></li>
   
   <li><a>Punkt 2</a>
     <ul>
      <li><a>Punkt 2.1</a></li>
      <li><a>Punkt 2.2</a></li>
      <li><a>Punkt 2.3</a></li>
      <li><a>Punkt 2.4</a>
        <ul>
        <li><a>Punkt 2.4.1</a></li>
        <li><a>Punkt 2.4.2</a></li>
        <li><a>Punkt 2.4.3</a></li>
        <li><a>Punkt 2.4.4</a></li>
        <li><a>Punkt 2.4.5</a></li>
        </ul>
      </li>
     </ul>
   </li>
   
   <li><a>Punkt 3</a></li>
   
   <li><a>Punkt 4</a></li>
   
   <li><a>Punkt 5</a>
   </li>
</ul>
</div>
</body>
</html>

Code:

* 	{
	margin:0;
	padding:0;
	border:0;
	list-style:none
	}

/* -- Ebene 1 -- */

ul.nav 
	{
	
	}
	
ul.nav a
	{
	text-decoration: none;
	color: #000000;
	}
	
ul.nav a:hover 
	{
	text-decoration: none;
	color: #FF0000;
	}

ul.nav li 
	{
	margin: 0px 10px 0px 0px;
	float: left;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-weight:bold;
	cursor: pointer;
	white-space: nowrap;
	}
	
/* -- Ebene 2 -- */

ul.nav ul 
	{
	position: absolute;
	display: none;
	}

ul.nav ul li 
	{
	float: none;
	display: inline;
	}
	
ul.nav li:hover ul 
	{
    	display: block;
  	}
  	
/* -- Ebene 3 -- */

ul.nav ul ul
	{
	position: absolute;
	display: none;
	}

Wenn ich die ganze Geschichte auf zwei Ebenen habe, dann funktioniert ja alles wunderbar, aber wie kann ich denn die dritte, vierte, usw. Ebene bearbeiten?

Ich habe schonmal für dritte Ebene etwas angefangen, aber das geht nicht. Irgendwie habe ich ein Brett vorm Kopf? Habe ich etwas bei der Vererbung falsch beachtet? Kann mir jemand helfen und es erklären, damit ich es für die Zukunft auch weiß.

Vielen Dank schonmal.
Gruß Schengo