Dropdown Menü mit CSS3
Hallo Freunde,
Ich habe ein tollen Menücode im Internet gefunden und versuche verzweifelt daran umzubasteln wie ich ein Dropdown Menü da raus bekomme. Mit <ul><li> komme ich nicht weit. So siehts es aus A Pen by Mohit Manuja CSS Code:
body{margin: 150px;} HTML-Code:
<div class="outer"> |
Was funktioniert denn konkret nicht?
|
Hi,
Ich weiß garnicht genau wo ich im Code was ändern muss um ein Dropdown Menü zu erstellen. Mein bestes Ergebnis ist das: CSS Code:
nav HTML-Code:
<nav> :? |
Mal so als Denkanstoß:
HTML-Code:
<!doctype html> |
Menü Item 1.1 soll das Dropdown sein, oder? Also die ul innerhalb der ul.
Am einfachsten wäre es für dich dir ein fertiges Script zu nehmen, das dir optisch gefällt und es noch bei Bedarf anzupassen. Ansonsten: Ich würde das Dropdown erstmal sichtbar lassen und anfangen das Dropdown zu stylen und zu positionieren (am besten mit position: absolute beim <ul> und mit position: relative beim umschließenden <li>). Wenn alles soweit passt, kannst du das Dropdown mit display: none; ausblenden. Das Prinzip ist dann, dass das man Dropdown beim hovern, also wenn man mit der Maus über den Menübutton fährt, per display: block; sichtbar macht. Also in etwa folgendes: Code:
ul ul { |
WOW genau den Denkanstoß hab ich gebraucht :lol: ich war so fixiert das ich outer und inter habe und hab versucht darum rum zubauen.
VIELEN DANK EUCH @etux ich habe display: block hier eingegeben li li a { text-decoration: none; color: white; } damit ich ein schönen button bekomme aber mir ist nicht klar wo (bzw. wie) ich ein Mouse over effekt bekomme. Also wo ich li:hover > background-color: black einfügen muss. |
Zitat:
oder nav li li:hover a { background-color: black; } Da ich noch paar Kleinigkeiten geändert habe, hier noch mal alles komplett: HTML-Code:
<!doctype html> |
Vielen Dank, dass ist klasse. Ich hab jetzt einiges dazugelernt. :D
Schönes Wochenende |
Zitat:
Zitat:
Zitat:
|
Zitat:
Auch Keine über die Praxisuntauglichkeit der ursprüngliche CSS-Formatierungen. Sehr gut! :D |
Alle Zeitangaben in WEZ +2. Es ist jetzt 21:30 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023