When working with Bootstrap dropdown menus – there is a gap when hovering over items in dropdown menus at the very top and very bottom of the menu. If it bothers you like it does me (when looking at a hover state of a menu item in the drop down), you can easily solve it by adding in one line of code:

nav.navbar-fixed-top .dropdown-menu {padding-top:0;padding-bottom:0}

Note: You may need to change the class of the navbar to match whatever you have in your code.

Before:

With that code – you can see the difference:

After:

Sometimes the extra/default spacing is fine – but there are other times where you need to get the hover state to go all the way to the top/bottom. With this simple CSS – you can easily make your designer happy.