Hallo zusammen,

wie ihr seht, bin ich (was CSS angeht) noch ein blutiger Anfänger. Ich möchte gerade eine Website erstellen, bei der die Hauptpunkte der Navigation von links nach rechts geht und die Unterpunkte von oben nach unten. Mein Problem ist jetzt, dass ich es nicht schaffe, dass die Unterpunkte erst dann sichtbar sind, wenn man mit der Maus über einen Hauptpunkt fährt. Könnt ihr euch mal angucken, was ich dazu geschrieben habe, und mir den Fehler nennen? Mit "display: none" habe ich die Unterpunkte ausgeblendet. Doch wenn ich bei "hover" dann "display: block" eingebe, erscheinen die Unterpunkte trotzdem nicht. Was mache ich falsch?

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

#mainnav         {         width: 100%;         font-size: 150%;         }               #mainnav ul         {           margin: 0 0 0 0px;             padding: 0;             list-style-type: none;         }             #mainnav ul li         {             display: inline;           margin: 0 0 0 0px;         background-image: url(test3.gif);         background-size: 100% 100%;         }             #mainnav ul li a         {             text-decoration: none;             color: black;         margin: 0 20 0 20px;         }             #mainnav ul li:hover         {         background-image: url(test2.gif);         background-size: 100% 100%;         }             #mainnav ul li a:hover     {        text-decoration: none;        color: white;         }           #mainnav ul li ul         {           margin: 0 0 0 0px;             padding: 0;             list-style-type: none;             display: none;         }             #mainnav ul li ul li         {             display: inline;           margin: 0 0 0 0px;         background-image: url(test1.gif);         background-size: 100% 100%;         }             #mainnav ul li ul li a         {             text-decoration: none;             color: black;         margin: 0 20 0 20px;         }             #mainnav ul li ul li:hover         {         background-image: url(test2.gif);         background-size: 100% 100%;     display: block; /* DIESE ZEILE MÜSSTE DOCH BEWIRKEN, DASS DIE UNTERNAVIGATION (wenn man mit der Maus darübergeht) ANGEZEIGT WIRD, WARUM GEHT DAS NICHT? */         }             #mainnav ul li ul li a:hover     {        text-decoration: none;        color: white;         }

Vielen Dank im Voraus für eure Hilfe!

Vom kurzem drüber scrollen würde ich sagen, da liegt der Fehler:

Code css:

1 2 3 4 5

/*Vorher*/ #mainnav ul li ul li:hover   /*Nachher*/ #mainnav ul li:hover ul

Denn ein Element, das unsichtbar ist, kann auch kein ":hover" haben.

Falls das nicht hilft, dann bitte auch das Markup zeigen.

Danke! Das war der Fehler. Jetzt habe ich nur noch das Problem, dass, wenn ich über den ersten Punkt gehe, der zweite, dritte usw. Punkt unter den Unterpunkten des ersten Punkts angezeigt werden (und nicht neben dem ersten Punkt).

Da hilft dir display:block und float:left weiter http://dabblet.com/gist/1695335