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:

HTML-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:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

#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.

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

Code css:

1 2 3 4

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

Großartig - ich danke dir vielmals.

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.