Jeremy Jeremy - 7 months ago 11
HTML Question

How do I move the menu dropdown content to so they are in line with the left edge of the button?

I'm trying to fix my menu code so that when I hover over the button, the dropdown menu will be in line with the left edge of the button. Right now it is spaced a bit to the right like a list.

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;
}

Answer

It's responding to the padding you have on the button because it's within the <button> tag. So you simply counter it with a negative margin on the div.

.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;
    margin-left: -16px; //add this line
}