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; 
}