Ich versuche, die Dropdown-Elemente in einem Menü zu positionieren, aber es funktioniert nicht wie erwartet. Zum Beispiel möchte ich, dass die Dropdown-Elemente unter den Hauptelementen zentriert werden, siehe Abbildung unten
Hier ist der entsprechende Code
<nav>
<ul id="navlist">
<li id="active"><a href="index.html">Home</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="#">Recipes</a>
<ul>
<li><a href="meatballs.html">Meatballs</a></li>
<li><a href="pancakes.html">Pancakes</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</li>
</ul>
</nav>
und hier ist die css, es ist ein bisschen chaotisch von ziemlich viel experimentieren ...
nav ul {
position:relative;
padding-left: 0;
margin:1px 0 30px 0;
background-color: #1d1d1d;
float: left;
width: 100%;
font-size:24px;
}
nav ul li {
position:relative;
display: inline;
}
nav ul li a {
position:relative;
padding: 20px 20px;
background-color: #1d1d1d;
color: #fff;
text-decoration: none;
float: left;
}
nav ul li a:hover {
background-color: #619f15;
color: #fff;
}
nav ul #active a {
background-color: #619f15;
color: #fff;
}
nav ul li ul {
position: absolute;
top:66px;
width: 50%;
font-size:12px;
display:none;
}
Antworten:
1 für die Antwort № 1Damit sich Ihre Dropdown-Elemente ordnungsgemäß verhalten, müssen Sie sie absolut positionieren, wie Sie es getan haben. Es ist jedoch viel einfacher, sie von oben zu positionieren:
top: 100%;
left: 0;
Auf diese Weise kümmern sich die Dropdown-Elemente nicht mehr um die Höhe Ihres Menüs und passen ihre Position entsprechend dem Hauptmenü an.
Für das "Umschalten" können Sie Folgendes verwenden:
nav ul li:hover > ul {
display: block;
}
Also in deinem Navi, wie man einen schwebt li nimm den nächsten ul und mach es sichtbar.
Komplettes Beispiel ohne zusätzliches Styling:
nav ul {
position: relative;
}
nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
}
nav ul li:hover > ul {
display: block;
}