html - 下拉框在使用 CSS 的 HTML 页面中不起作用

Question

当我将光标移动到主菜单(“例如:菜单 2”)时，我可以在

下看到我的下拉列表

当我将光标移动到 submenu1 后，它没有显示，我也无法选择它

这是我的示例代码:

<style type="text/css">

ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

</style>

<div id="menu" align="left">

<ul id="menu">
    <li>
        <a href='<%=request.getContextPath()%>/auth/gs.page'>Menu1</a>
    </li>
    <li><a>Menu2</a>

        <ul class="sub-menu">
            <li>
                <a href='<%=request.getContextPath()%>/auth/view.page'>submenu1</a>
            </li>
        </ul>
    </li>

</div>

请给我解决问题的思路

Answer 1

我猜您看到的行为实际上是当您将鼠标从顶级导航项向下移动时子菜单消失。

由于您的设置方式，存在一个小间隙(1-3 像素，具体取决于浏览器和默认用户样式)，这意味着它失去了 hover 状态(因此隐藏了子菜单) 因为当您越过该间隙时，您正在“取消悬停”顶级导航项。

如果这是您所看到的，最简单的修复方法是从 ul#menu li ul.sub-menu 中删除 top 值(您将其设置为 30px) 并将等效的 padding 添加到子菜单的 li 以使其看起来正确。

ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    left: 0;
    width: 100px;
}


ul#menu li ul.sub-menu li {
     padding-top: 2px;   
}

这是一个关于这个变化的 fiddle :http://jsfiddle.net/adnrw/J44NJ/