Weird grey bottom line when using multiple layers of menu with :hover - html

Question

My website's demo navigation bar is like this in here https://jsfiddle.net/xzfy2ee2/.
Since the options for 'Faunas' is continuing to grow, I think it may be better to create a side menu. So I used all sorts of css :hover to achieve the result.
Although the functionality is robust enough, there is a wired grey line just after 'Asia' when I move the mouse onto 'Faunas' and calls out the dropdown menu. It's still there when I move the mouse onto 'Asia' to show the side menu 'Japan'.
The HTML/CSS for the navigation bar is shown here:
#nav a:hover
{
color: Silver;
}
#nav ul
{
list-style-type:none;
}
#nav ul li
{
display: inline-block;
}
#nav ul li:hover ul
{
display:block;
}
#nav ul ul
{
display: none;
position: absolute;
background-color: #888888;
border: 2.5px solid #A0A0A0;
border-top:0;
margin-left: 0px;
margin-right:2px;
min-width:80px;
}
#nav ul ul li
{
display: block;
}
#nav ul ul ul li
{
display: none;
position: absolute;
background-color: #888888;
border: 0px solid #A0A0A0;
border-top:0;
margin-left:115px;
margin-right:2px;
margin-top:-20px;
padding-right:5px;
min-width:80px;
}
#nav ul ul li:hover ul li
{
display:block;
}
#nav ul ul ul li:hover
{
display:block;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Faunas
<ul style ="width:160px">
<li style="border-bottom:1px solid white;margin-bottom:3px">About</li>
<li style="border-bottom:1px solid white;margin-bottom:7px">World</li>
<li style="border-bottom:1px solid white;margin-bottom:2px">
Asia
<ul>
<li>Japan</li>
</ul>
</li>
<li>Albania</li>
<li>Bulgaria</li>
<li>Chile</li>
<li>Colombia</li>
<li>France</li>
<li>Italy</li>
<li>Japan</li>
<li>Macedonia</li>
<li>Poland</li>
<li>Serbia</li>
<li>Slovenia</li>
<li>South Africa</li>
<li>United Kingdom</li>
<li>United States</li>
</ul>
</li>
</ul>
</div>
I didn't find anything to do with the gray line. I wonder what exactly is the line there? And is there any way to remove it?

Answer 1

you have unnecessary border: 2.5px solid #A0A0A0; applied to #nav ul ul (which covers both 1st and 2nd level dropdowns)
here's working jsfiddle https://jsfiddle.net/Lt4udmpt/

Answer 2

#nav ul ul
{
display: none;
position: absolute;
background-color: #888888;
border-bottom: 2.5px solid #A0A0A0;
border-top:0;
margin-left: 0px;
margin-right:2px;
min-width:80px;
}
In this part of code border-bottom: 2.5px solid #A0A0A0; is the problem! It is causing the child ul tag to have border too!
Solution:
In css:
Border removed from #nav ul ul and added border to specific second ul
#nav ul ul
{
display: none;
position: absolute;
background-color: #888888;
border-bottom: 2.5px solid #A0A0A0;
border-top:0;
margin-left: 0px;
margin-right:2px;
min-width:80px;
}
#nav ul #second
{
border: 2.5px solid red;
}
In Html:
Assign an id to the ul
<ul id="second" style ="width:160px" >
If you just don't need the boder than delete border-bottom: 2.5px solid #A0A0A0; this line from #nav ul ul
update at jsfiddle

Answer 3

Looks like the #nav ul ul border-bottom element is the culprit.
#nav ul ul
{
border-bottom: 2.5px solid #A0A0A0; <-----delete
}