Hallo zusammen,

ich baue gerade eine Homepage für einen bekannten und hänge an meinem CSS Menü.

Ich bin kein CSS Profi aber denoch einigermaßen darin geübt, nur in großen a:hover ul li ul blabla li verschachtelungen steig ich aus!

gibt es eine gute beschreibung / tutorial wie diese verschachtelung exakt funktioniert?)

nun zu meinem praktischen Problem:

http://newpage.bs-energie.de/

sobald ich in ein SubMenü wechsle bleibt der Menütext weiss vom Elternmenü und verschwindet so vollkommen im weissen hintergrund.

Wie kann ich dieses Element ansprechen welches diesen "Fehler" verursacht?

Danke für jede Hilfe!!

Viele Grüße

Dominik


.pagewidth2 .mainlevel
{
position: relative;
margin-top: 2px;
padding: 0;
border: 0;
float: left;
width: 195px;
z-index:10;
text-decoration: none;
background: transparent;
}


.mainlevel, .mainlevel ul {
padding: 0px;
margin: 0px;
list-style: none;
text-align: left;
background: transparent;
z-index:10;
text-decoration: none;

}

.mainlevel ul {
width: 195px;
overflow: hidden;
text-decoration: none;
background-repeat: repeat-x;
background-position: 0px 0px;
z-index:10;
}
/* Links im Menu in der obersten Ebene */
.mainlevel a {
display: block;
width: 195px;
background: transparent;
background-image: url("../images/underline.png");
background-position: bottom left;
background-repeat: no-repeat;
color: #666666;
padding-top: 7px;
padding-bottom: 7px;
text-decoration: none;
z-index:10;
}

.mainlevel a:hover{
background: transparent;
position: relative;
padding-top: 7px;
padding-bottom:7px;
z-index:10;
color: #666666;
text-decoration: none;
background-image: url("../images/backgroundbutton.png");
background-position: bottom left;
background-repeat: no-repeat;


}


.mainlevel li {
float: left;
width: 195px;
line-height: 32px;
z-index:10;
text-decoration: none;
background: transparent;
font: small-caps; /* Text... */
}



/**
* Hide the submenus
*/
.mainlevel li ul {
position: absolute;
width: 195px;
left: -2000px;
z-index:10;
text-decoration: none;

}

.mainlevel li ul a {
color: #666666;
}

/**
* Show the submenus on mouse-over (.hover class)
*/

.mainlevel li:hover a {
color: #ffffff; /* Textfarbe von Men�Elementen wenn Hover */
}

.mainlevel li:hover li a {
color: #666666; /* LinkText im SubMen� ohne Hover */
}

.mainlevel li:hover li a:VISITED {
color: #666666;
}

.mainlevel li:hover li:hover a {
color: #fffffff; /* LinkText im SubMen� bei Hover */
}

/* Hintergrund von SubMen�!! Nur Hintergrund nix Text */
.mainlevel li:hover ul {
left: 194px;
overflow: visible;
z-index:10;
margin-top: -46px;
border: none; /* Rahmen um SubMen� */
background-color: transparent; /* Hintergrund von SubMen�*/
text-decoration: none;
margin-top: -1;

}

.mainlevel li a:hover, .menu ul li:hover a{
color:#666666;
text-decoration:none;
}




/**
* IE fix ... Javascript Fix
*/
#mainlevel li:hover ul, #mainlevel li:sfhover ul {
left: auto;
}

so gehts:

ich habe beschlossen, das :hover auf den <a> anzuwenden, weil dieser "Pseudoselektor" eigentlich mal dafür erdacht wurde, und alte Browser nicht unbedingt mit li:hover umgehen können.

Der Trick lag im
.mainlevel li ul li a:hover {...}

...was in .mainlevel (deinem container-div der ul) das li, das wiederum eine ul mit li enthält, in dem ein gerade "gehoverter" link ist, selektiert

funktionieren würde auch:
.mainlevel ul li ul li a:hover {...}
.mainlevel ul ul li a:hover {...}

einen Link, wo die Verkettung erklärt wird habe ich leider nicht parat, ist aber eigentlich nicht soo schwer.

Man hangelt sich von Elternelement durch dessen Kinder durch bis zu dem Element, das man selektieren will.

Evtl hat ja jemand anders einen Link gefunden, wo das gut erklärt ist.

Hi,

vielleicht hilft dir das Tut bei deinem Flyoutmenü.

__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

hallo vast,

vielen Dank! deine Erklärung war schonmal verständlich für mich bezüglich des ewigen aufbaus so einer definition!

ich werde versuchen die jetzt anzuwenden und mich nochmal melden sobald ich weiter weiss!

danke und grüße!

Dominik