Liste der Anhänge anzeigen (Anzahl: 1)
Problem mit CSS Menü: Hauptmenüpunkt behält Textfarbe nicht
Hallo, habe ein CSS Problem...
und zwar habe ich ein CSS Menü mit 3 Leveln.
Das Problem ist das sobald ich mit dem Cursor vom Level 1 in Level 2 wechsel, zwar der Hintergrund bestehen bleibt, aber die Textfarbe wieder zurückgesetzt wird.
Das selbe Problem ist auch beim Wechsel von Level 2 auf Level 3.
Wie bekomme ich das hin?
Danke schonmal für eure Mühe :)
Hier ist ein Link zum Menü:
http://www.kh-hef.de/index.php/menuetest.html
Anbei ein Screenshot und hier ist der css Code
Der Text "Service" soll schwarz bleiben, wechselt aber zurück in Hellgrau.
Code:
/* Style sheet Suckerfish */
.mod_navigation
{
top:90px;
height:300px;
position:absolute;
overflow:visible;
z-index:999;
}
.mod_navigation a
{
text-decoration: none;
font-weight: bold;
color:#DFDFDF;
display:block;
padding-left:10px;
padding-right:10px;
}
.mod_navigation a:hover,
.mod_navigation a.sfhover
{
text-decoration: none;
font-weight: bold;
color:#000000;
display:block;
padding-left:10px;
padding-right:10px;
}
.mod_navigation p
{
margin:0px;
padding:0px;
}
.mod_navigation ul
{
margin:0px;
padding:0px;
list-style-type:none;
}
.mod_navigation li
{
/*width:150px; /* Breite eines Menüpunktes festlegen */
position:relative; /* Position */
float:left; /* links nebeneiander anordnen */
background-color:#336799; /*eine Hintergrundfarbe */
border-right:1px solid #DFDFDF; /* optischer Rahmen */
border-bottom:1px solid #cb0165; /* optischer Rahmen */
border-left:1px solid #DFDFDF; /* optischer Rahmen */
line-height:31px; /* bestimmt die Höhe eines Menüeintrages */
}
.mod_navigation li ul ul
{
left:201px;
top:0px;
position:absolute;
}
/*Ausblenden der Ebenen*/
.mod_navigation li ul
{
bottom:0px;
left:-1px;
right:0px;
top:32px;
position:absolute;
display:none; /* Ausbleden der Untermenüs */
}
/*Anzeige Unternavigationen*/
.mod_navigation li:hover ul
{
display:block;
}
/*Blendet 3. Ebene aus*/
.mod_navigation ul li:hover ul ul
{
display:none;
}
/*Zeigt 3. Ebene an*/
.mod_navigation ul ul li:hover ul
{
display:block;
}
/*Ändert BG Farbe*/
.mod_navigation li:hover,
.mod_navigation li.sfhover
{
background-image:url("tl_files/webconsulting/menu.jpg");
color:#000000;
font-weight:bold;
}
/*Macht zweite Ebene breiter*/
.level_2 li
{
width:200px;
}
/*Zur Zeit aktivierter Menüpunkt*/
.active span
{
background-image:url("tl_files/webconsulting/menu.jpg");
color:#000000;
font-weight:bold;
display:block;
padding-left:10px;
padding-right:10px;
}
Liste der Anhänge anzeigen (Anzahl: 1)
Es liegt auf jeden Fall an dem .mod_navigation li:hover. Wenn du über ein LI in tieferer Ebene hoverst, hoverst du gleichzeitig auch über die übergeordneten LIs, da die tieferen LIs ja dort drin enthalten sind, auch wenn's im Firebug nicht direkt so aussieht.
Vergleiche mal mit meiner suckerfish aus meinem Thread hier im Forum, ich weiß, ist mitlerweile kaum noch zu finden. Deswegen hänge ich sie mal hier an.
Anhang 2876
Ich musste die Datei in .txt ändern, da .css hier nicht erlaubt ist.
Benutze li:hover nur für das Aus- und Einblenden der Menüpunkte. Den hover-Status für das Design der Menüpunkte machst du dann über die A-Elemente. a:hover
Gruß
Liste der Anhänge anzeigen (Anzahl: 1)
So, ich habe mein Menü nun soweit fertig!
Bin nun so zufrieden wie es ist, allerdings tritt beim Internet Explorer immernoch ein Fehler auf, denn manchmal bleiben die Menüs auf Level 3 hängen bleiben (siehe Anlage).
Passiert nur beim IE, beim Firefox ist alles ok (wie so oft ;)).
Hat jemand eine Idee woran das liegt?
Hier die Testseite
