zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Hover Submenü - Problem in Darstellung des Elternelements

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.03.2011, 15:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2008
Beiträge: 2
DaDom befindet sich auf einem aufstrebenden Ast
Standard CSS Hover Submenü - Problem in Darstellung des Elternelements

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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.03.2011, 13:04
Neuer Benutzer
neuer user
 
Registriert seit: 02.03.2011
Beiträge: 26
vast befindet sich auf einem aufstrebenden Ast
Standard

so gehts:

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

.mainlevel li a:hover {
  color: #ffffff;   /* Textfarbe von  MenüElementen wenn Hover  */
  background:url("../images/backgroundbutton.png") no-repeat scroll left bottom transparent;
}
.mainlevel li ul li a:hover {
  color: #fff;   /* Textfarbe von  MenüElementen wenn Hover  */
  background: none;
}

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

.mainlevel li ul li a:hover {
  color: #ffffff;   /* LinkText im SubMenü bei Hover  */
  background:url("../images/backgroundbutton.png") no-repeat scroll left bottom transparent;
}
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.03.2011, 18:00
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

vielleicht hilft dir das Tut bei deinem Flyoutmenü.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #4 (permalink)  
Alt 07.03.2011, 09:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2008
Beiträge: 2
DaDom befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
erste seite mit css, problem.... carpital CSS 1 09.09.2009 17:25
Problem bei CSS Grundlayout DasSauerkraut CSS 0 10.08.2009 21:35
Doctype und CSS Problem tech CSS 3 29.05.2009 20:16
Problem mit CSS Ausklappmenü: Im Untermenü wird der Platz nicht genutzt braindead CSS 6 20.09.2006 22:45
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:59 Uhr.