下拉菜單之間的導航空間創建錯誤

Question

我已經爲我創建的網站做了一個下拉菜單，它看起來不錯，我認爲，雖然這個水平導航欄和垂直下拉菜單之間有一個px空間酒吧。當您將鼠標懸停在空間上時，垂直菜單會再次消失，並且由於您有時會將鼠標放在一個px空間上，這對用戶來說非常混亂。

這是我的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> 

這是我的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; 
} 

我沒有看到任何保證金/填充引起1個像素的空間，我不知道如何解決此問題。我希望有人能幫助我，謝謝。

Answer 1

您的代碼和樣式表非常好，易於閱讀和遵循。

一種解決方案是的#dropdown ul上邊距調整到-2px如下：

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

負邊緣被允許，並且可以是相當有用的。您遇到的問題在下拉菜單中很常見，此修補程序是一個典型的問題。

僅供參考，請參閱小提琴：http://jsfiddle.net/audetwebdesign/Ygn6X/