1
Ich habe eine obere Leiste erstellt, die auf der rechten Seite die Dropdown-Taste MENU enthält. Aber dieser Drop-Down-Inhalt hat genau die gleiche Größe (Breite) wie meine MENU-Taste. Schließlich - mein Ziel ist es, diesen Drop-Down-Inhalt so breit wie die obere Leiste zu machen.CSS: mache das Dropdown-Menü so breit wie die obere Leiste
Mein HTML-Code sieht wie folgt aus:
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</div>
</div>
Und wichtiger Teil - CSS:
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
Wenn Sie sehen wollen, wie es wie HERE sieht ist jsFiddle Link.
Haben Sie keine Ahnung, wie Sie mein Problem lösen können?
so einfach wollen, Sie sind erstaunlich, danke! –
@ PetrBečka Sie sind willkommen) –
@ PetrBečka Ich habe CSS aktualisiert und unnötige Eigenschaften entfernt. –