Question

Chrome版本：41.0.2272.101 m

我有一个水平显示的列表，其中一个列表项我有一些文本，另一个列表在悬停效果处于活动状态时垂直显示。

这适用于IE和Firefox，没有任何问题＆amp;有时铬。

当开发人员工具插件打开时，它可以工作，当另一个选项卡打开时，它可以工作。

我很确定chrome或我的虚拟服务器没有问题。我相信问题出在我的代码中。

<div id='unity'>
<div id='nav'>
    <ul>
        <li>
            <a href='#'>Home</a>
        </li>
        <li>
            <a href='#'>Team</a>
        </li>
        <li>
            <a href='#'>About us</a>
        </li>
        <li id='nolink' class='drop'>
            Service
            <ul>
                <li>
                    <a href='#'>Some awesome service</a>
                </li>
                <li>
                    <a href='#'>Some awesome service</a>
                </li>
                <li>
                    <a href='#'>Some awesome service</a>
                </li>
                <li>
                    <a href='#'>Some awesome service</a>
                </li>
                <li>
                    <a href='#'>Some awesome service</a>
                </li>
            </ul>
        </li>
        <li>
            <a href='#'>Portfolio</a>
        </li>
        <li>
            <a href='#'>Newsroom</a>
        </li>
        <li>
            <a href='#'>Upcomming events</a>
        </li>
        <li>
            <a href='#'>Contact us</a>
        </li>
    </ul>
</div>

    html, body{
    margin:0;
    background:#ebebeb;
    font-family: 'Roboto', sans-serif;
}
#unity{
    width:1000px;
    margin:0 auto;
    background:white;
    position:relative;
    padding-top:35px;
    position:relative;
}
#nav{
    position:fixed;
    top:0;
    height:35px;
    width:1000px;
    background:rgba(255,255,255,0.9);
    z-index:2;
}
#nav > ul{
    margin:0;
    padding:0;
    font-size:0;
}
#nav > ul > li{
    list-style-type: none;
    display: inline-block;
    font-size:12px;
}
#nav > ul > li{
}
#nav > ul > li > a, #nav > ul > li#nolink{
    display:inline-block;
    line-height: 35px;
    height:35px;
    padding:0 10px;
    text-decoration: none;
    color:#1c1c1c;
    cursor:pointer;
}
#nav > ul > li > a:hover, #nav > ul > li#nolink:hover{
    color:white;
    background:#1c1c1c;
}
#nav > ul > li > ul > li{
    display:block;
}
#nav > ul > li.drop > ul{
    display:none;
    background: #1c1c1c;
    padding:0;
}
#nav > ul > li.drop:hover > ul{
    display:block;
    position:absolute;
    margin-left:-10px;
    border-radius: 1px;
}
#nav > ul > li.drop > ul > li{
    text-align: center;
    color:white;
    line-height: 30px;
    height:30px;
}
#nav > ul > li.drop > ul > li > a{
    color:white;
    display: block;
    text-decoration: none;
    padding:0 25px;
}
#nav > ul > li.drop > ul > li:hover > a{
    color:#1c1c1c;
    background:white;
}
#nav > ul > li.drop > ul > li, #nav > ul > li.drop > ul > li > a{

}

这个bug也没有在jsfiddle中发生。 https://jsfiddle.net/575hbxzb/

youtube视频： https://www.youtube.com/watch?v=4XK5DprGr6k&feature=youtu.be

Answer 1

此问题与不同的Chrome版本41.0.2272.118 m相同。

我们在菜单中使用相同的技术，在过去的几个月中，此问题仅出现在chrome上。如果打开新选项卡或打开调试工具或调整窗口大小，问题就会消失。

我发现只有一种解决方法：它是放大顶部<li>的高度，以便子菜单元素和<li>重叠。通过这种方式菜单可以正常工作，但如果重叠区域太小而你移动鼠标太快，问题就会再次出现。

我认为这是一个Chrome问题，因为几个月前我们的菜单没有任何问题，所有其他浏览器都运行良好。

希望得到这个帮助。

Answer 2

我有同样的问题和我的解决方案解决方案：添加一个margin-top：15px;对于我的标题，非常难看，特别是如果布局需要第一个像素的菜单，但在Google修复此错误之前适用于我。

chrome嵌套导航下拉悬停问题

2 个答案: