Um Men\u00fceintrag und das auszuklappende Men\u00fc zu trennen ist im ersten Unter-Element der Titel des Eintrags und in einem abgetrennten eigenen Element das Untermen\u00fc untergebracht:<\/p>\n
<div class=\"item\">\r\n <div class=\"caption\">Item 1<\/div>\r\n <div class=\"submenu\">\r\n <ul>\r\n <li>Subitem 1<\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/div><\/pre>\nSoweit ist der ganze Kram noch absolut einleuchtend, chaotisch wird es erst ab dem Punkt, was man einem Browser so alles sagen muss, damit daraus der erwartete Effekt entsteht.<\/p>\n
.menu {\r\n position: relative;\r\n}\r\n.menu .item {\r\n position: static;\r\n float: left;\r\n}\r\n\r\n.menu .item:last-child {\r\n float: none;\r\n}\r\n\r\n.menu .item .submenu {\r\n position: absolute;\r\n left: 0px;\r\n opacity: 0;\r\n}\r\n\r\n.menu .item:hover .submenu, .menu .item .submenu:hover {\r\n opacity: 100;\r\n}<\/pre>\nUnd da das jetzt sicherlich dem einen oder anderen zu schnell ging – ich habe ungef\u00e4hr 3 Tage dran gesessen, bevor es wie gew\u00fcnscht lief – noch einmal in langsam zum Abschreiben \ud83d\ude09<\/p>\n
Die Realisierung des Dropdown-Men\u00fcs ist einfach \u00fcber die letzte CSS-Regel erledigt: Wenn sich der Cursor \u00fcber dem Item ODER dem Submenu befindet, dann bitte dieses anzeigen. Andernfalls wird \u00fcber die Regel dar\u00fcber sichergestellt, dass keines der Men\u00fcs angezeigt wird.<\/p>\n
Etwas komplizierter sind die Men\u00fc-Eintr\u00e4ge: Diese werden mittels Links-Floaten in die Men\u00fczeile aufgef\u00e4delt. Um hier einen Abschluss zu bekommen, wird das letzte Element ohne Float-Angabe direkt platziert. Dadurch erh\u00e4lt es genau den verbleibenden Platz auf der Zeile. Um das Floaten dynamisch zu gestalten, wird mittels des passenden CSS-Selektors automatisch das letzte Element gew\u00e4hlt.<\/p>\n
Interessant wird nun der Punkt, zur Positionierung der Untermen\u00fcs: W\u00fcrde man in der Klasse .item einfach position:relative; angeben, w\u00fcrden sich alle Positionsangaben auf den Item beziehen. In diesem Fall wollen wir aber den Parent haben. Dies erreichen wir, indem wir den Positionierungsmodus static verwenden, der dem Browser sagt, dass dieses Element in der Positionierung von relativ und absolut positionierten Elementen uninteressant ist und \u00fcbersprungen werden kann. Mit diesem kleinen, aber wesentlichen Trick bezieht sich das left:0; im .submenu dann auch auf das .menu-Element und zeigt das Men\u00fc wie gew\u00fcnscht an.<\/p>\n
Ein Hinweis noch in Bezug auf Margins und Paddings in einer derart aufgebauten Men\u00fczeile: Die Abst\u00e4nde k\u00f6nnen unter Umst\u00e4nden etwas unintuitiv wirken, da auf Grund des Floatings die vorderen Elemente als Teil des letzten Elementes dargestellt werden. Man muss also passend seine Margins und Paddings an diesen Umstand anpassen.<\/p>\n
On Popular Request: Demo f\u00fcr links ausgerichtetes Men\u00fc<\/a><\/p>\n
![\"Flattr](\"http:\/\/blog.benny-baumann.de\/wp-content\/plugins\/flattr\/img\/flattr-badge-large.png\"){kind=icon}
<\/a><\/p>","protected":false},"excerpt":{"rendered":"