✔ Pupup-/Pulldown-Menü Probleme mit dem Ausklappen der Unterlisten im Menü

[Davicito]

Hi, kurze Frage.
ich möchte gerne, dass in meinem vertikalem Menü, sich alle Untermenüs ausklappen, wenn ich mit dem Mauszeiger über einen Menüeintrag fahre.
Hab einen Code geschrieben, der nur leider nicht so recht funktionieren will. Habt Ihr ne Idee, was ich falsch gemacht habe?

Gruß.

CSS-Datei

...
/*-------------------------------- Features of Main-Menu --------------------------------*/
.menu ul{	
	bottom: 3px;
	margin: 0;
	padding: 0;
	width: 140px; /* width of menu */	
	list-style-type: none;	
}

.menu ul li a{
	position:relative;
	z-index: 2;
	top: -926px;
	background: #040B66 no-repeat right top; /*color of menu by default -> kräftiges Blau*/
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana; /*Schrifttype*/
	display: block;
	width: 120px;	
	padding: 10px; /*Vertical padding for each menu link  (Padding = Hhöhe)*/
	text-indent: 25px; /*Schrift in Menü positionieren horizontal*/
	text-decoration:none;
	border-bottom: 10px solid #8AB0D9; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}

.menu ul li a:visited, .menu ul li a:active{
	color: #BDD6F0;  /*Schriftfarbe des Menüs -> hellblau*/
}

.menu ul li a:hover{
	background-color:#999; /*color of menu onMouseover -> hellgrau */
	/*border-bottom: 6px solid #BDD6F0 ; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}

/*-------------------------------- Features of Sub-Menu --------------------------------*/
.menu ul ul li a{
	float:none;
	position:absolute;
	display: block;
	top:30px;
	left:100%;
	background: #8AB0D9 no-repeat right top; /*color of menu by default -> hellblau*/
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana; /*Schrifttype*/	
	width: 130px;
	padding: 5px; /* Vertical padding for each menu link  (Padding = Hhöhe)*/
	text-indent: 25px;
	text-decoration:none;
	border-bottom: 6px solid #BDD6F0; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
	color:#040B66;
}
.menu ul li > ul{
	display:block;
}
.menu ul li:hover > ul{
	display:none;	
}

.menu ul ul li a:visited, .menu ul ul li a:active{
	float:none;
	color:#040B66;  /*Schriftfarbe des Menüs -> dunkelblau*/
}

.menu ul ul li a:hover{
	float:none;
	display:block;
	background-color:#999; /*color of menu onMouseover -> hellgrau */
	border-bottom: 6px solid #BDD6F0 ; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}
...

Menü:

...
<nav>
       	<div class="LogoHeader">
            <img src="Image/Web-Ecke-Logo2.jpg" />				
            </div>
           	<!-- Inhalt des Layout-Headers-->                 				
			<div class="LayoutHeader">
            <!--img src="apache_pb.gif" /-->
				Ueberschriftenzeile
            </div>
		<div class="HorizontalLine"></div>
		<div class="VerticalLine"></div>
            
		<!-- Inhalt des Layout-Content-->
		<div class="menu_content">			
			<?php 
				//Dateinamen aus dem Link nehmen anhängen					
				if(isset( $_GET['page'] )) 
				{
					$myPage = $_GET['page'];
					include($myPage);
				}											
			?>          
		</div>  
		<!-- Menüleiste-->                 
		<div class="menu ul"> 
		<div class="LeftStack"></div>			
			<ul>                		
				<li><a href="">Mitarbeiter</a></li>
				<ul>                        	
					<li><a href="menu.php?page=Eingabe.php">Eingabe</a></li>
					<li><a href="menu.php?page=MA-Update.html">Bearbeitung</a></li>
					<li><a href="menu.php?page=MA-Ausgabe.php">Ausgabe</a></li>             
				</ul>
				<li><a href="">Kategorie 2</a></li>
				<li><a href="">Kategorie 3</a></li>                        
				<li><a href="">Kategorie 3</a></li>                        
			</ul>                              
		</div>                  
	</nav>

 

[Netzwerkidi]

Soll das Menü waagerecht oder senkrecht angezeigt werden, die Untermenüs also nach unten klappen oder nach rechts, ggf. in einer Zeile nebeneinander oder neben-/untereinander? Kommen da noch mehr Menüpunkte zu (ggf. dynamisch generiert), oder war es das schon?

Das Tag "<nav>" gibt es m. W. nicht. Soll das so sein?

Das endende li-Tag (<li><a href="">Mitarbeiter</a></li>) muss nach dem folgenden endenden ul-Tag stehen, href ist außerdem leer!

Code-Validierung ist die erste Maßnahme in solchen Fällen.

Ich würde mich beim Beseitigen des Problems auf das absolut Notwendigste beschränken, d. h. also nur div, ul und li drinlassen im Code und das andere Zeugs rausstreichen wie auch im CSS nur das Notwendige drinlassen, Kommentare, Farben, Borders, Padding, Margin... u. ä. raus.

Das macht es übersichtlicher und leichter zu entdecken, wo der Hund begraben ist.

 

[Davicito]

Hallo Netzwerkidi,
es werden irgendwann noch ein paar Untermenüs geschrieben. Aber erstmal muss es mit einem funktionieren, um zu sehen, ob es überhaut auch schon so funktioniert - mit einem Untermenü.
Das Menü ist eine vertikale (wie o. beschrieben -> senkrecht) Anordnung, bei dem alle Untermenüs nach unten aufklappen sollen.
Das <nav>-Tag steht doch oben im Code drinn!
Also das Untermenü muss ja den Eintrag Position:absolute; haben und dann müssen die Zeilen:

...
.menu ul li > ul{
    display:block;
}
.menu ul li:hover > ul{
    display:none;   
}
...

eingefügt werden. Irgend eine Idee, wo der Fehler liegen könnte?

Gruß.

 

[Netzwerkidi]

Ups, das nav-Tag ist offenbar neu in HTML5. Wieder was gelernt.

<!DOCTYPE HTML>
<html>
  <head>
  <title></title>
  <style type="text/css">
    .menu ul li ul {
      display: none;
    }
    .menu ul li:hover ul {
      display: block;
    }      
  </style>
  </head>
  <body>   
  <div class="menu ul">
		<div class="LeftStack"></div>			
			<ul>                		
				<li><a href="#">Mitarbeiter</a>
				<ul>                        	
					<li><a href="#">Eingabe</a></li>
					<li><a href="#">Bearbeitung</a></li>
					<li><a href="#">Ausgabe</a></li>             
				</ul>
        </li>
				<li><a href="#">Kategorie 2</a></li>
				<li><a href="#">Kategorie 3</a></li>                        
				<li><a href="#">Kategorie 3</a></li>                        
			</ul>                              
		</div> 
  </body>
</html>

Falls das so im IE nicht funktionieren sollte, könnte das am Doctype liegen.

 

[Davicito]

Naja.. ausprobiert habe ich das mal. Aber es ist nach wie vor, das das Popup-Menü nicht erscheinen will. Da ich weiß, dass mit dem IE immer Probleme auftreten, benutze ich Google Chrom oder Mozilla Firefox. Da wird meine formatierte Webseite ordentlich angezeigt. Öffne ich den IE, stimmen meine formatierten Klassen, mit CSS, nicht mehr über ein. Absätze werden verschoben und stehen an verkehrter Stelle, etc.
Mit dem Popup ist das aber auch wie verhext. hab mir auch Beisiele angeschaut und auch im Internet nachrecherchiert. Aber alles will nicht so recht, wie ich mir das gedacht hatte. Es liegt auch nur am Popup-Menü.

Im Unterlistenmenü benutze ich ja auch "position:absolute;", womit das Untermenü, beim Öffnen des Browsers nicht angezeigt wird. Und erst, wenn mann mit der Maus über ein Menüeintag fährt, soll durch die unteren beiden Klassen ".menü ul li ul{display:none;}" und "menü ul li:hover ul{display:block}", das Popup erscheinen.

/*-------------------------------- Features of Sub-Menu --------------------------------*/
.menu ul ul li a{     
        position:absolute;
	display: block;
	background: #8AB0D9 no-repeat right top;
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana;
	width: 130px;
	padding: 5px; 
	text-indent: 25px;
	text-decoration:none;
	border-bottom: 6px solid #BDD6F0;
}
.menu ul li ul{
    display:block;
}
.menu ul li:hover ul{
    display:none;   
}

ich tappe immer noch im Dunkeln, warum das jetzt bei mir nicht funktioniert, und bei allen anderen ja. Fehlt bei mir, in den Menü-Klassen, noch ein Eintrag, den ich unbedingt benötige, damit das Popup endlich erscheint?

hier nochmal mein kompletter css-code

@charset "utf-8";
/* CSS Document */

/*Backround-Eigenschaften*/
body{
	font-family: "Courier New", Courier, monospace;
	background-color: #BDD6F0;
}
/*-------------------------------- Features of Main-Menu --------------------------------*/
.menu ul{	
	margin: 0;
	padding: 0;
	width: 140px;
	list-style-type: none;	
}

.menu ul li a{
	position:relative;
	z-index: 2;
	top: -926px;
	background: #040B66 no-repeat right top;
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana;
	display: block;
	width: 120px;	
	padding: 10px;
	text-indent: 25px;
	text-decoration:none;
	border-bottom: 10px solid #8AB0D9;
}

.menu ul li a:visited, .menu ul li a:active{
	color: #BDD6F0; 
}

.menu ul li a:hover{
	background-color:#999;	
}

/*-------------------------------- Features of Sub-Menu --------------------------------*/
.menu ul ul li a{
	position:absolute;
	display: block;
	background: #8AB0D9 no-repeat right top;
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana; 
	width: 130px;
	padding: 5px; /* Vertical padding for each menu link  (Padding = Hhöhe)*/
	text-indent: 25px;
	text-decoration:none;
	border-bottom: 6px solid #BDD6F0; 
}

.menu ul ul li a:visited, .menu ul ul li a:active{
	color:#040B66;  
}

.menu ul ul li a:hover{	
	background-color:#999; 
	border-bottom: 6px solid #BDD6F0 ; 
}
.menu ul li > ul{
	display:none;
}
.menu ul li:hover > ul{
	display:block;	
}
</style>

 

[hela]

...

.menu ul li > ul{
	display:none;
}
.menu ul li:hover > ul{
	display:block;	
}

ich tappe immer noch im Dunkeln, warum das jetzt bei mir nicht funktioniert, ...

... weil dein HTML invalid ist und nicht zu den CSS-Regeln passt.
Die oben gezeigten Selektoren verweisen auf UL-Elemente, die Kindelemente eines LI-Elementes sind. In deinem Markup gibt es aber offensichtlich kein UL-Element mit einem LI-Elternelement.

Lies bitte die Beiträge von Netzwerkidi genau durch. Das Beispiel von Netzwerkidi funktioniert doch, du musst nur erkennen wo der Unterschied zu deinem HTML-Quelltext ist.

 

[Davicito]

Halo hela, natürlich gehe ich auf jeden Einwand ein und probiere es aus...
Nur ist es so, dass ich auch die Variante von Netzwerkidi ausprobiert habe.
Sprich im HTML-Code der "menu.php" wie auch in der CSS-Datei habe ich diese Variante - ohne ">" ausprobiert.

sprich

.menu ul li ul{
    display:none;
}
.menu ul li:hover ul{
    display:block;  
}

und auch das will nicht gehen.

Noch eine andere Idee?

Gruß

 

[Netzwerkidi]

Der Marktanteil des IE beträgt weltweit immer noch rund 50 Prozent. Es geht kein Weg an ihm vorbei, ob man es mag oder nicht.

Dein "position:absolute;" bezieht sich übrigens auf alle Kombinationen von ".menu ul ul li a".
Falls etwas angezeigt wird, bist du sicher, dass es da ist - Koordinaten -, wo du es erwartest?

Mir kommt deine Vorgehensweise etwas überhastet vor, warum fängst du nicht klein an mit der Basis und arbeitest dich dann voran mit dem restlichen Layout wie vorgeschlagen?

Meine Lösung läuft auf IE8.0.6x und FF, Chrome und Opera, jeweils alle letzte Versionen.

Hast du dem Doctype die notwendige Beachtung geschenkt? Der ist wichtig im Falle von :hover und IE.

 

[Davicito]

Hallo hela, natürlich gehe ich auf jeden Einwand ein und probiere es aus...
Nur ist es so, dass ich auch die Variante von Netzwerkidi ausprobiert habe.
Sprich im HTML-Code der "menu.php" wie auch in der CSS-Datei habe ich diese Variante - ohne ">" ausprobiert.

sprich

.menu ul li ul{
    display:none;
}
.menu ul li:hover ul{
    display:block;  
}

und auch das will nicht gehen.

Noch eine andere Idee?

Gruß

Nachtrag...

... ... In deinem Markup gibt es aber offensichtlich kein UL-Element mit einem LI-Elternelement.

...würde ich nicht sagen! Ich hab ja ein Ul-Child-Element, welches ein Li-Elternelement untergestellt ist. -> Siehe Code 4-5 Zeile.

<div class="menu ul"> 
<div class="LeftStack"></div>			
	<ul>                		
		<li><a href="">Mitarbeiter</a></li>
		<ul>                        	
			<li><a href="menu.php?page=Eingabe.php">Eingabe</a></li>
			<li><a href="menu.php?page=MA-Update.html">Bearbeitung</a></li>
			<li><a href="menu.php?page=MA-Ausgabe.php">Ausgabe</a></li>             
		</ul>
		<li><a href="">Kategorie 2</a></li>
		<li><a href="">Kategorie 3</a></li>                        
		<li><a href="">Kategorie 3</a></li>                        
	</ul>                              
</div>

 

[hela]

... Noch eine andere Idee?

Dazu braucht man keine Idee, man braucht HTML und CSS.

Funktionierendes Beispiel von Netzwerkidi, aber leicht abgeändert:

<!DOCTYPE HTML>
<html>
  <head>
  <title></title>
  <style type="text/css">
    .menu ul li > ul {
      display: none;
    }
    .menu ul li:hover > ul {
      display: block;
    }
  </style>
  </head>
  <body>
  <div class="menu ul">
    <div class="LeftStack"></div>
      <ul>
        <li> <!-- Dieses Element hat 2 Kindelemente: A- und UL-Element! -->
          <a href="#">Mitarbeiter</a>
          <ul>
            <li><a href="#">Eingabe</a></li>
            <li><a href="#">Bearbeitung</a></li>
            <li><a href="#">Ausgabe</a></li>
          </ul>
        </li>
        <li><a href="#">Kategorie 2</a></li>
        <li><a href="#">Kategorie 3</a></li>
        <li><a href="#">Kategorie 3</a></li>
      </ul>
    </div>
  </body>
</html>

Nicht funktionierendes Beispiel, das deinem oben gezeigten HTML-Quelltext nachempfunden ist:

<!DOCTYPE HTML>
<html>
  <head>
  <title></title>
  <style type="text/css">
    .menu ul li > ul {
      display: none;
    }
    .menu ul li:hover > ul {
      display: block;
    }
  </style>
  </head>
  <body>
  <div class="menu ul">
    <div class="LeftStack"></div>
      <ul>
        <li><a href="#">Mitarbeiter</a></li>
        <!-- LI- und nachfolgendes UL-Element sind Geschwisterelemente! -->
        <ul>
          <li><a href="#">Eingabe</a></li>
          <li><a href="#">Bearbeitung</a></li>
          <li><a href="#">Ausgabe</a></li>
        </ul>
        <li><a href="#">Kategorie 2</a></li>
        <li><a href="#">Kategorie 3</a></li>
        <li><a href="#">Kategorie 3</a></li>
      </ul>
    </div>
  </body>
</html>

Entsprechend der HTML-Elementreferenz dürfen in einem UL-Element nur LI-Elemente vorkommen. Deshalb ist dein HTML invalid und Netzwerkidi hatte dir ja bereits geraten, das mal mit einem Validator zu überprüfen.