Question

I have created a drop down menu using JQuery but when I test it in Chrome, the third and lower level menus show a thick white line (across the centre of the list item) in addition to the border which should be added. This does not happen in other browsers. It only occurs when I apply the border-top parameter to the list items. This must be some bug related to CSS in chrome because I cannot see what it is I might be doing wrong. I have Googled the issue and have not found anyone with the same problem.

Take a look:

JSfiddle

Full screen

Answer 1

It seems that some kind of ‘collision’ is happening between

.nav ul ul li:first-child{
    border-top:solid 1px white;

and

.nav ul li{
    border-bottom:solid 1px #fff;

I came up with somewhat of a solution:

/* THIRD +  LEVEL LISTS */
.nav ul ul li{
    border:none;
    border:1px solid #FFF;
    border-left:none;
}

Add this at the top of your third tier.

It seems this is a bug in chrome, but I have searched through chromium and not found anything related to this. You should report it.