Question

My custom drop down menu has a really large change in top and bottom padding.

UPDATE Javascript, CSS & HTML included in fiddle [PHP removed]

---

First off, I didn’t realise I could share a fiddle ^^
Pretty epic site.

I’ma keep debugging, but thought I’d post it here to see if anyone can spot where the problem is 🙂

Answer 1

In your fieldset css you are changing the line-height, which is also applied to the dropdown.

You have to set the line-height in the css for the dropdown:

.dropdown,
.dropdown li /* or whatever other selector is also needed */
{
    line-height: 1em;
}

EDIT:

That seems to fit quite good:

.dropdown,
.dropdown li,
.dropdown span,
.dropdown a {
    padding: 0;
    line-height: 3em;   
}