Drop down navigation space between the drops create error

Question

I have made a drop down menu for a website I'm creating, it looks nice I think, though there is this one px space between the horizontal nav bar and the vertical drop down bars. When you hover your mouse on the space the vertical menu disappears again and since you sometimes put your mouse on the one px space it's very confusing for the users.

This is my html;

<div class="nav">
        <div class="links">
            <ul id="dropdown">
                <li class="currentpage">
                    <a href="index.html"> Tetterode </a>
                    <ul>
                        <li><a href="project.html">Project</a></li>
                        <li><a href="promenade.html">Promenade</a></li>
                        <li><a href="brochure.html">Brochure</a></li>
                        <li><a href="impressies.html">Impressies</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Woningen</a>
                    <ul>
                        <li><a href="oplevering.html">Oplevering</a></li>
                        <li><a href="impressies.html">Impressies</a></li>
                        <li><a href="kavelkaart.html">Kavelkaart</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Locatie</a>
                    <ul>
                        <li><a href="ligging.html">Ligging</a></li>
                        <li><a href="routeplanner.html">Routplanner</a></li>
                        <li><a href="situatie.html">Situatie</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Financiering</a>
                    <ul>
                        <li><a href="hypotheken.html">Hypotheken</a></li>
                        <li><a href="fiscaal.html">Fiscale mogelijkheden</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Contact</a>
                    <ul>
                        <li><a href="makelaars.html">Makelaars</a></li>
                        <li><a href="gegevens.html">Gegevens</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>

And this is my css;

.nav{
    width: 100%;
    height:50px;
    background-image:url("bg.jpg");
    background-repeat:repeat;
    text-align:center;
    padding-bottom:0px;
    margin-bottom:0px;
}

.links ul li {
   list-style-type: none;
   padding-right: 17px;
   height:50px;
   position:relative;
   display:inline-block;
   padding-top:0px;
   line-height:50px;
   padding-left:17px;
   text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50);
   margin-top:0px;
}
.links ul li:hover {
    height:50px;
   background-color:#b2071a;
   display:inline-block;
   margin:0px;
}
.links a {
   text-transform:uppercase;
   font-family:helvetica;
   font-size:18px;
   color:#fff;
   display:inline-block;
   font-size:20px;
   text-decoration:none;
}
.links a:hover {
  background-color:transparent;
}
#dropdown ul{
    background-color:#b2071a;
    list-style:none;
    position:absolute;
    left:-9999px;
    z-index:20;
    font-size:16px;
    padding-top:0px;
    margin-top:0px;
    }
#dropdown ul li{
    float:none;
}
#dropdown ul a{
    white-space:nowrap; 
    font-size:16px;
}
#dropdown li:hover ul{ 
    left:0;
}
#dropdown li:hover a{ 
    text-decoration:underline;
}
#dropdown li:hover ul a{ 
    text-decoration:none;
}
#dropdown li:hover ul li a:hover{ 
color:#000;
}
.currentpage{
   height:50px;
   background-color:#b2071a;
   display:inline-block;
}

I don't see any margin/padding that causes the 1 px space and I don't know how to solve this. I hope someone can help me, thank you.

Answer 1

Your code and style sheet are pretty good, easy to read and follow.

A solution is to tweak the top margin of #dropdown ul to -2px as follows:

#dropdown ul{
    background-color:#b2071a;
    list-style:none;
    position:absolute;
    left:-9999px;
    z-index:20;
    font-size:16px;
    padding-top:0px;
    margin-top:-2px;
}

Negative margins are allowed and can be quite useful. The problem you encountered is quite common in pull-down menus and this fix is a typical one.

For reference, see the fiddle: http://jsfiddle.net/audetwebdesign/Ygn6X/