CSS子菜單項不會讓我徘徊它

Question

我想在無序列表UL中做CSS菜單，我幾乎可以正常工作。

如果您運行下面的代碼或在JSFiddle鏈接上查看它，我會遇到一些問題http://jsfiddle.net/hgBDV/1/您會看到有一個水平菜單，當您將第二個標記爲「More」一個子菜單。

該子菜單是我需要幫助的，現在當您將鼠標懸停在「菜單」列表項上時，子菜單在屏幕上變爲可見，但是無法將鼠標懸停在子菜單上。

請幫我解決這個問題

<div id="nav-wrapper"> 
    <ul> 

     <li><a href="">Link</a></li> 
     <li><a href="">Link 2</a></li>   
     <li><a href="">Link 3</a></li> 

     <li><a href="">Link 4</a></li> 
     <li><a href="">Link 5</a></li> 
     <li><a href="">More</a> 
      <ul> 
       <li><a href="">Sub Link 1</a></li> 
       <li><a href="">Sub Link 2</a></li> 
       <li><a href="">Sub Link 3</a></li> 
       <li><a href="">Sub Link 4</a></li> 
       <li><a href="">Sub Link 5</a></li> 
      </ul> 
     </li> 
     <li><a href="">Link 7</a></li> 

    </ul> 
</div> 

CSS

<style type="text/css"> 
#nav-wrapper ul { 
    width: 700px; 
    float: right; 
    margin: 0; 
    list-style-type: none; 
} 
#nav-wrapper ul li { 
    vertical-align: middle; 
    display: inline; 
    margin: 0; 
    color: black; 
    list-style-type: none; 
} 
#nav-wrapper ul li a { 
    text-decoration: none; 
    white-space: nowrap; 
    line-height: 45px; 
    font-size: 13px; 
    color: #666; 
    padding: 5px 15px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#nav-wrapper ul li a:hover { 
    color: #fff; 
    background-color: #4caef2; 
} 
#nav-wrapper ul li a:visited { 
    color: #666; 
} 

/* Hide Sub-menus */ 
#nav-wrapper ul ul, 
#nav-wrapper ul li:hover ul ul, 
#nav-wrapper ul ul li:hover ul ul{ 
    display: none; 
} 
/* SHOW Sub-menus on HOVER */ 
#nav-wrapper ul li:hover ul, 
#nav-wrapper ul ul li:hover ul, 
#nav-wrapper ul ul ul li:hover ul{ 
    display: block; 
    margin:0; 
    padding:0px 2px 2px 0px; 
    border-color:#AAAAAA; 
    border:1px; 
    border-style:solid; 
} 
</style> 

Answer 1

http://jsfiddle.net/hgBDV/2/

你有麻煩，因爲線高度爲45像素，但你的文字大小爲13像素。當您將鼠標懸停在「更多」鏈接上時，子菜單會顯示，但當您將鼠標移動到「更多」鏈接的邊界之外時，子菜單將不再顯示。雖然您已將邊距設置爲0px，但行高允許20px的間隔。在我的'修復'中，我已將行高設置爲0px。谷歌的「css suckerfish」爲已經發明的輪子。

Answer 2

刪除的事行高

#nav-wrapper ul { 
    width: 700px; 
    float: right; 
    margin: 0; 
    list-style-type: none; 
} 
#nav-wrapper ul li { 
    vertical-align: middle; 
    display:inline; 
    margin: 0 0 0 0; 
    color: black; 
    list-style-type: none; 

} 
#nav-wrapper ul li a { 
    text-decoration: none; 
    white-space: nowrap; 
    font-size: 13px; 
    color: #666; 
    padding: 5px 15px 5px 15px; 
    margin: 5px 0px 0px 10px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 

} 
#nav-wrapper ul li a:hover { 
    color: #fff; 
    background-color: #4caef2; 
} 
#nav-wrapper ul li a:visited { 
    color: #666; 
} 

/* Hide Sub-menus */ 
#nav-wrapper ul ul { 
    display: none; 
} 
/* SHOW Sub-menus on HOVER */ 
#nav-wrapper ul li:hover ul{ 
    display:block; 
    margin:3px 0 0 0; /* if you change top value here thing will screw up */ 
    padding:0px 2px 2px 0px; 
    border-color:#AAAAAA; 
    border:1px; 
    border-style:solid; 
}