Question

I’m trying to style this custom dropdown menu

But the part that drops down is always slightly narrower (1px on each side) than the “headline” part of the dropdown.

When I change width here,

.wrapper-dropdown-1 {
    position: relative;
    width: 200px;
    padding: 10px;
    margin: 0 auto;
}

nothing seems to happen. How can I adjust this so the part that drops down is the same width as the top part? Where is this being controlled at? In the demo, the widths seem to align perfectly, and I cannot understand how I’ve changed the style to affect it.

jsbin

Answer 1

Are you adding or removing borders from one of the elements? If it’s one px on each side that seems like the likely cause.

You can/should either match the borders or, if you are okay losing some cross-browser compatibility, you could use box-sizing:

box-sizing: padding-box
(with vendor prefixes for now, e.g. -webkit-box-sizing: padding-box).

Another (hacky) way to do it would be to set the dropdown’s margin-left and margin-right to -1px or, equivalently, from your JSBin, change left/right to -1px:

.wrapper-dropdown-1 .dropdown {
     /* Size & position */
     position: absolute;
     top: 100%;
     left: -1px;
     right: -1px;

      /* ... */

}