1

当我将光标移动到主菜单时（“例如：菜单 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>

请给我解决它的想法

4

3 回答 3

3

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

由于您设置它的方式，存在一个小间隙（1-3px，取决于浏览器和默认用户样式），这意味着hover当您“悬停”顶级时它会丢失状态（并因此隐藏子菜单）当您越过该间隙时的导航项目。

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

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


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

这是一个关于这种变化的小提琴：http: //jsfiddle.net/adnrw/J44NJ/

于 2013-09-24T05:58:41.567 回答
2

运行您的代码时，我没有看到任何问题。您能否澄清“不立即显示”的意思？

于 2013-09-24T05:51:56.810 回答
2 
ul#menu li:hover ul.sub-menu

应该是：

ul#menu li:hover ul.sub-menu, ul#menu li ul.sub-menu:hover
于 2013-09-24T05:52:56.137 回答