css Dropdown-Menü - hover funktioniert nicht

lieschen89 · #1 (**permalink**) 06.02.2014, 08:02

Hi,

ich versuche mir ein Drop-Down Menü zu basteln, allerdings passiert bei mir beim :hover leider noch nichts. Denke weil ich die css-Klassen falsch habe.
Hier mal der Code:

HTML-Code:

<style type="text/css">
#menuhover :hover{
	display: inline-block; 
	line-height:30px; 
	background: #9EC436; 
	width: 50%; 
	height: 30px; 
	border-radius: 4px 4px 4px 4px; 
	-webkit-border-radius: 4px 4px 0px 0px;
    color: #FAFAFA !important;
}

ul {

list-style-type: none;
}


a.MenuEbene2 {
text-decoration: none;
display: block;
text-align: left;
background: #9EC436;
color: #000;
line-height: 1.5;
width: 100%;
}

#menuhover a.MenuEbene2:hover {
color: yellow;
/* background: #A3BFB0; */
background: blue;
line-height: 1.5;
width: 100%;
}


#menuhover ul {
position: absolute;
z-index: 2;
display: none;
}

/*--sollte eigentlich beim Hovern die DropDowns anzeigen--*/
.aussen:hover ul.breiteMenuUnterEintraege {
	display: block;
	color: red;
	background: blue !important;
}
</style>


        <div id="menuhover" class="aussen">
	         Profil
	            <ul class="breiteMenuUnterEintraege">
	               <li><a class="MenuEbene2" href="/Eintrag1.xhtml">Eintrag1</a></li>
	               <li><a class="MenuEbene2" href="Eintrag2.xhtml">Eintrag2</a></li>
	               <li><a class="MenuEbene2" href="Eintrag4.xhtml">Eintrag3</a></li>
	            </ul>
	     </div>

Also denke es geht um das hier:

Code:

/*--sollte eigentlich beim Hovern die DropDowns anzeigen--*/
.aussen:hover ul.breiteMenuUnterEintraege {
	display: block;
	color: red;
	background: blue !important;
}

hab schon ziemlich viele Varianten ausprobiert, aber es passiert einfach nichts. Im Internet finde ich nur Beispiele wo man nochmal anstatt meines divs eine Liste drum rum hat, aber so wie ich das jetzt habe bekomm ichs einfach nicht zum Laufen.

Kann mir vll jemand helfen?

cloned · #2 (**permalink**) 06.02.2014, 08:14

Im CSS wird zwischen .Klassen. #IDs, Elementen und

seudo-selectoren unterschieden. Ein Unterschied ist, dass IDs zB eine höhere Gewichtung haben als Klassen und Klassen wiederum eine höhere als Elemente.
Sprich:

Code:

#menuhover ul {display:none} /*Hier setzt du ul auf display:none mit einer ID*/

.aussen:hover ul.breiteMenuUnterEintraege {
  display:block}/*Hier setzt du das Untermenü auf display:block, aber da eine ID stärker zählt als eine Klasse, wird es vom vorigen Codeteil überschrieben*/

Beschäftige dich also noch mehr mit den Grundlagen von CSS, du wirst sonst noch über viele ähnliche Probleme stolpern.
Hier wird das besser und ausführlicher erklärt.

explanator · #3 (**permalink**) 06.02.2014, 08:21

Zeige mal bitte ein komplettes Beispiel mit Doctype, head und body.

lieschen89 · #4 (**permalink**) 06.02.2014, 08:23

ah, das gibts doch nicht.
Ich hatte es erst über Id versucht, aber als ich da dann sämtliche Möglichkeiten durch hatte und es immer noch nicht ging hab ichs dann analog zu einem Beispiel ausm Netz versucht, der hatte das über class gemacht.

Aber jetzt gehts. Naa, danke. Eigentlich war das css:

Code:

#menuhover:hover ul.breiteMenuUnterEintraege {
  display:block
  
 }

mein erster Versuch gewesen. Aber da war dann wohl irgendwas anderes falsch, weils nicht ging.

Jetzt funktioniert alles super, danke.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist	Sp33dy G0nz4l3s	CSS	2	12.06.2010 17:38
css dropdown menue / abstände	designWerker	CSS	0	03.11.2008 18:23
Lightbox mit zweiter CSS Datei funktioniert nicht	T4ke	CSS	12	11.12.2007 19:20
Mysteriöses in CSS Dropdown Menü	ph!L	CSS	3	21.07.2006 12:31