Ich versuche, meinen Menücode zu reparieren, so dass, wenn ich den Mauszeiger über die Schaltfläche halte, das Dropdown-Menü mit der linken Kante der Schaltfläche übereinstimmt. Gerade jetzt ist es ein bisschen nach rechts wie eine Liste.Wie verschiebe ich den Menü-Dropdown-Inhalt so, dass er mit der linken Kante der Schaltfläche übereinstimmt?
HTML:
<center>
<div class="menubar">
<button class="button">Forms
<div class="menubar-content">
<a href="#">Department Update Form</a>
<a href="#">Project Start Month Form</a>
<a href="#">Add New Employee Form</a>
</div>
</button>
<button class="button">Reports
<div class="menubar-content">
<a href="#">Human Resource's Employees Report</a>
</div>
</button>
<button class="button">Reports
<div class="menubar-content">
<a href="#">Human Resource's Employees Report</a>
<a href="#">2012 04 Product Plan Project Report</a>
<a href="#">Department Data Report</a>
<a href="#">Employee Business Info Report</a>
<a href="#"></a>
</div>
</button>
</div>
</center>
CSS:
.button {
background-color: blue;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
margin:5px;
}
.menubar {
position: relative;
display: inline-block;
}
.menubar-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin: 16px;
}
.menubar-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menubar-content a:hover {
background-color: #f1f1f1;
}
.button:hover .menubar-content {
display: block;
}
.menubar:hover .dropbtn {
background-color: #3e8e41;
}
Vielen Dank! Das hätte ich nie getan. – Jeremy
Kein Problem. Wenn es funktioniert, würde es Ihnen etwas ausmachen, meine Antwort als korrekt zu akzeptieren, um Leuten zu helfen, die das später finden? – amflare
Sicher! Du hast deinen Doppelpunkt nach dem linken Rand verpasst. Keine Bange. – Jeremy