I'm trying to remove whitespace at above a header containing a nav bar with drop down lists.
I've got the top margin and padding set to zero, and the white space seems to be controlled by the Overflow style. If Overflow is hidden, the whitespace at the top is greatly decreased. If Overflow is visible, the white space increases.
The problem is that if I set overflow hidden, the drop-down lists on my nav bar are truncated. If overclow is visible, the drop downs show completely, but I've got a lot of white space at the top.
The HTML/CSS i'm using at the top is (let me know if I need to post more):
<div id="header" style="width:100%; overflow:hidden; height:500 background-color:#0B77A4; position:relative; margin-top:0; padding-top:0;background-color:#0B77A4">
<nav id="top" style="overflow:visible;">
This is what it looks like with Overflow hidden:
This is what it looks like with overflow visible:
How do I get rid of the whitespace at the top (ideally completely get rid of the white space), without preventing the drop down lists from showing in their entirety?
(A good example of what I'm trying to do is the page header on EE... no whitespace at the top, with drop-down lists showing in full)