Question

我正在尝试使用无序列表UL在CSS中执行菜单，我几乎正常工作。

我遇到了一些麻烦，如果您运行下面的代码或在JSFiddle链接上查看http://jsfiddle.net/hgBDV/1/您将看到有一个水平菜单，当您在第二个到最后一个项目标记为“更多”时“有一个子菜单。

该子菜单是我需要帮助的，现在当您将鼠标悬停在“菜单”列表项目上时，子菜单在屏幕上变得可见，但是您无法将鼠标悬停在子菜单上。

请帮我纠正这个问题

<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/

您遇到问题，因为行高为45px，但文字大小为13px。当您将鼠标悬停在“更多”链接上时，子菜单会显示，但当您将鼠标移动到“更多”链接的边界之外时，将不再显示子菜单。虽然您已将边距设置为0px，但行高允许20px间隙。在我的'修复'中，我将行高设置为0px。谷歌“css suckerfish”用于已经发明的轮子。

Answer 2

删除了东西line-height

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

CSS子菜单项不会让我悬停它

2 个答案: