✔ Horizontales Menü

[Alex_T]

Hallöle,

ich habe da mal eine bescheidene Frage. Folgendes:
Wie bekomme ich es hin, dass wenn ich über die Unterpunkte im Menü fahre, der Hauptpunkt aus der eigentlichen Menüleiste verändert bleibt? Heißt - ich fahre mit der Maus über das Kindelement, jedoch soll auch das Elternelement verändert bleiben, solange ich mich in dessen "Unterliste" befinde.

Hier mal mein Code:

<div id="menu">
     <ul>
    	<li><a href='http://localhost/AT/index.php?Content_NAV=Startseite' <?php if($Content == "Startseite") {echo" style='color:#FFF;'";} ?>><center>Startseite</center></a></li>
    </ul>
    <ul>
		<li><a href='http://localhost/AT/Switch.php?Content=Liga&Content_NAV=Programme'	<?php if($Content == "Programme") {echo" style='color:#FFF;'";} ?>><center>Programme</center></a></li>
    </ul>
    <ul>
    	<li><a href='#' <?php if($Content == "Downloads") {echo" style='color:#FFF;'";} ?>><center>Downloads</center></a>
            <ul>
            <li><a href='http://localhost/AT/Switch.php?Content=Programme_D&Content_NAV=Downloads'>Programme</a></li>
            <li><a href='http://localhost/AT/Switch.php?Content=Patches_D&Content_NAV=Downloads'>Patches</a></li>
            </ul>
         </li>
     </ul>
     <ul>   			
    	<li><a href='#' <?php if($Content == "Support") {echo" style='color:#FFF;'";} ?>><center>Support</center></a>
            <ul>
            <li><a href='http://localhost/AT/Switch.php?Content=FAQ&Content_NAV=Support'>FAQ</a></li>
            <li><a href='http://localhost/AT/Switch.php?Content=Kontakt&Content_NAV=Support'>Kontakt</a></li>
            </ul>
        </li>
     </ul>
     <ul>
    	<li><a href='#' <?php if($Content == "Community") {echo" style='color:#FFF;'";} ?>>Community</a>
            <ul>
            <li><a href='http://localhost/AT/Switch.php?Content=Kontakt&Content_NAV=Community'>Forum</a></li>
            </ul>
        </li>
    </ul>
</div>

...und das dazugehörige Stylesheet:

#menu {
width: 500px;
background: #414141;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 100px;
float: left;
}

#menu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
background-color:#4b4b4b;
margin: 0;
padding: 2px 3px;
text-decoration:none;
color:#7a7a7a;
height:45px;
line-height:45px;
outline:0;
}

#menu a:hover {
color: #FFF;
background-image:url(Bilder/Button_hover.jpg);
}

div#menu ul ul {
display: none;
}

div#menu ul li:hover ul
{display: block;}

#menu ul ul {
position: absolute;
z-index: 500;
border:1px solid #aaaaaa;
border-top:none;
width:150px;
}

#menu ul ul a {
color:#FFF;
text-decoration:none;
height:25px;
line-height:25px;
padding-left:30px;
}

#menu ul ul a:hover {
color:#FFF;
text-decoration:none;
background-color:#7a7a7a;
background-image:none;
height:25px;
}

Hoffe ich konnte mein Problem ausführlich schildern und bedanke mich schon jetzt für Eure Bemühungen.

 

[SpiceLab]

Der zweite Selektor #menu ul li:hover a sorgt dafür:

#menu a:hover, #menu ul li:hover a {
color: #FFF;
background-image:url(Bilder/Button_hover.jpg);
}

 

[Alex_T]

Großartig - ich danke dir vielmals.

 

[SpiceLab]

Gern geschehen.

Und wähle das nächste Mal einen trefferenden Themenbetreff, der die Frage / das Problem auf den Punkt bringt, denn bei einem vertikalen Menü würde die Lösung hier gleichermaßen lauten.