chrome nested navigation drop down hover issue - css

Question

Chrome version: 41.0.2272.101 m
I have a list that is displayed horizontally, inside one of the list items I have some text and another list that is displayed vertically when the hover effect is active.
This works in IE and firefox without any issue & sometimes chrome.
When the developer tools plugin is open, it works, and when another tab is open it works.
I am pretty sure there is no issue with chrome, or my virtual server. I am confident that the issue is in my code.
<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{
}
this bug also not happening in jsfiddle.
https://jsfiddle.net/575hbxzb/
youtube video:
https://www.youtube.com/watch?v=4XK5DprGr6k&feature=youtu.be

Answer 1

same issue here with a different chrome version 41.0.2272.118 m.
We use the same technique with our menu and in the last few month this issue was appear on chrome only.
If you open new tab or open debugging tools or resize the window the problem disappear.
I've found only a workaround: it is to enlarge the height of the top <li> so the child menu element and the <li> will overlap.
In this way the menu works but if the overlap area is too small and you move the mouse too fast the issue will appear again.
I think this is a chrome issue because some month ago we don't have any problem with our menu and all other browsers work well.
Hope this help.

Answer 2

I have the same problem and my workaround solution: add a margin-top:15px; to my header, is very ugly especily if the layout requires the menu at the first pixels but works for me until Google fix this bug.