Html/css flyout oder dropdown

Computer: Software & Programmierung HTML & CSS
#1

liebe wissende,
ich auf eine seite gestossen, auf der ein dropdown menu (manchmal auch flyout genannt, ich kenne den unterschied nicht, falls einer besteht) angeboten wurde, dass nur aus html und css bestehen solle, also ohne javascript. ich dachte mir, sowas versuch ich auch mal, und bin nach ein paar überlegungen auf folgende „lösung“ gekommen.
diese funktioniert aber nicht, weiss jemand woran das liegt?
sobald man über einen link fährt, sollte das untermenu erscheinen.
lg niemand

hier der code

ul {
list-style-type:none;
padding:0;
margin:2px;
}
ul,li {
padding:0;
width:50px;
margin:5px;
border-style: solid;
border-width:2px;
display:block;
background-color:green;
}
ul li ul, ul li ul li {
display:none;
}
a {
color:black;
text-decoration:none;
}
a:hover ul,a:hover ul li {
padding:0;
width:50px;
margin:5px;
border-style: solid;
border-width:2px;
display:block;
background-color:green;
}

1 11 12 13

2 21 22 23

3

31

32

33

#2

/* a:hover ul,a:hover ul li // ist falsch */ {

ul li:hover ul,ul li:hover ul li { 
 padding:0;
 width:50px;
 margin:5px;
 border-style: solid;
 border-width:2px;
 display:block;
 background-color:green;
}

aber du musst eh noch daran feilen :smile:

#3

erstmal danke für die antwort!
nun, ich verstehe nicht, wieso es li:hover heissen sollte anstatt a:hover, denn ich habe gelesen dass der IE nur beim a-tag auf :hover anspricht. ausserdem wäre dann die struktur ja falsch, die hirarchie lautet in meinem beispiel ja:
ul
-li
–a
—ul
----li
wie kommst du also auf
ul li:hover ul li
?
lg niemand

#4

ja falsch, die hirarchie lautet in meinem beispiel ja:
ul
-li
–a
—ul
----li

klären wir erstmal einiges

du hast

#5

ergänzung

ul ist nur der container sozusagen, li der eintrag, deswegen
hovert auch der eintrag (das sichtbare anfassbare) und nicht
das ul element.

klar tut auch ein UL hovern, nur wir wollen ja pro element eine untergruppe öffnen, und nicht pro gruppe eine untergruppe :smile:
geht aber auch , wers braucht :smile:

ich höffe es leuchtet :smile:

#6

nochmals danke für die ausführungen

ich höffe es leuchtet :smile:

langsam schon:wink:
wenn ich also die struktur:
ul
-li
–a
—ul
----li
habe, dann kann ich das letzte hier abgebildete li-element auch mit
ul li ul li { blabla:xxx;}
oder sogar mit
li li {blabla:xxx;}
ansteuern?
ich muss also nicht alle tags beachten, die dazwischen auch noch auftreten?

ich möchte eben wenn möglich den a-tag verwenden, auch ohne bestimmtes href- ziel (zb mit href="#") damit das auch mit dem IE funktioniert.
(
http://www.mediengestalter.info/forum/4/li-hover-fun…
http://www.tutorials.de/forum/css/312421-li-hover-fu…
http://archivist.incutio.com/viewlist/css-discuss/59833
)

lg niemand

#7

ich möchte eben wenn möglich den a-tag verwenden, auch ohne
bestimmtes href- ziel (zb mit href="#") damit das auch mit dem
IE funktioniert.

ps: weiss jemand wieso es (selbst im firefox) nicht funktioniert wenn ich wie am anfang gesagt mit a:hover ul li {bla:xxx;} arbeite?

lg niemand

#8

Hallo niemand,

siehe http://www.cssplay.co.uk/menus/latest-flyout.html

Schöne Grüße,

Mohamed.

#9

danke für den link!
es haben sich für mich aber eher noch mehr fragen gestellt.
was bedeuten folgende tags?

und ausserdem: hier wurden die li und die a tags angesprochen:

#menu li a:hover {background-color:#09c; color:#fff;} 
#menu li:hover \> a {background-color:#09c; color:#fff;}
#menu ul li:hover \> ul {left:100%; margin-top:-23px; margin-left:-1px;}
#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}

welches ist jetz für was zuständig?, meiner meinung nach bräuchte man bei zwei ebenen nur ein a:hover oder ein li:hover
lg niemand

#10

Conditional Comments

Das sind Conditional Comments. Das was zwischen den Conditional Comment Tags steht wird in diesem Fall nur für Browser umgesetzt, die älter als der IE 6 oder der IE 6 selbst sind, wenn ich mich nicht irre. („lte“ = „less than or equal“?)

Schöne Grüße,

Mohamed.

#11

Guten Morgen,

Du irrst nicht.
http://de.wikipedia.org/wiki/Conditional_Comments

Schönen Tag noch,
-Efchen