CSS子菜单项不允许我将其悬停

我试图用CSS做一个无序列表的菜单，我几乎可以正常工作

我遇到了一个小问题，如果您运行下面的代码或在JSFIDLE链接上查看它，您将看到有一个水平菜单，当您看到第二个到最后一个标记为“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

#导航包装器{
宽度：700px；
浮动：对；
保证金：0；
列表样式类型：无；
}
#李国宝{
垂直对齐：中间对齐；
显示：内联；
保证金：0；
颜色：黑色；
列表样式类型：无；
}
#导航系统{
文字装饰：无；
空白：nowrap；
线高：45px；
字体大小：13px；
颜色：#666；
填充：5px15px；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
}
#导航：悬停{
颜色：#fff；
背景色：#4caef2；
}
#李娜：参观了{
颜色：#666；
}
/*隐藏子菜单*/
#导航包装器，
#导航包装器ul li：悬停ul，
#导航包装器ul li：悬停ul{
显示：无；
}
/*悬停时显示子菜单*/
#导航包装器ul li：悬停ul，
#导航包装器ul li：悬停ul，
#导航包装器ul li：悬停ul{
显示：块；
保证金：0；
填充：0px 2px 2px 0px；
边框颜色：#AAAAA；
边界：1px；
边框样式：实心；
}

---

您遇到了问题，因为行高为45px，但文本大小为13px。当您将鼠标悬停在“更多”链接上时，子菜单将显示，但当您将鼠标移到“更多”链接的边界之外时，子菜单将不再显示。当您将边距设置为0px时，线高度允许20px的间隙。在我的“修复”中，我已将线条高度设置为0px。谷歌“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 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;
}

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