html - 使用带有 :hover 的多层菜单时奇怪的灰色底线

Question

我网站的演示导航栏是这样的https://jsfiddle.net/xzfy2ee2/ .

由于“动物群”的选项不断增加，我认为创建一个侧边菜单可能更好。所以我使用了各种 css :hover 来实现结果。

虽然功能足够强大，但当我将鼠标移到“动物群”上并调出下拉菜单时，“亚洲”后面有一条灰色连线。当我将鼠标移到“亚洲”以显示侧面菜单“日本”时，它仍然存在。

导航栏的 HTML/CSS 如下所示:

    #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><a href = "/Homepage/MainContent">Home</a></li>
    
        <li><a href="/Faunas/Main">Faunas</a>
    
          <ul style ="width:160px">
            <li style="border-bottom:1px solid white;margin-bottom:3px"><a href="/Faunas/Main">About</a></li>
            <li style="border-bottom:1px solid white;margin-bottom:7px"><a href="/World/Main">World</a></li>
            <li style="border-bottom:1px solid white;margin-bottom:2px">
              <a href="/Faunas/Asia">Asia</a>
              <ul>
                <li><a href="/Japan/Main">Japan</a></li>
              </ul>
            </li>
            <li><a href="/Albania/Main">Albania</a></li>
            <li><a href="/Bulgaria/Main">Bulgaria</a></li>
            <li><a href="/Chile/Main">Chile</a></li>
            <li><a href="/Colombia/Main">Colombia</a></li>
            <li><a href="/France/Main">France</a></li>
            <li><a href="/Italy/Main">Italy</a></li>
            <li><a href="/Japan/Main">Japan</a></li>
            <li><a href="/Macedonia/Main">Macedonia</a></li>
            <li><a href="/Poland/Main">Poland</a></li>
            <li><a href="/Serbia/Main">Serbia</a></li>
            <li><a href="/Slovenia/Main">Slovenia</a></li>
            <li><a href="/SouthAfrica/Main">South Africa</a></li>
            <li><a href="/UnitedKingdom/Main">United Kingdom</a></li>
            <li><a href="/UnitedStates/Main">United States</a></li>
          </ul>
    
        </li>
    
      </ul>
    </div>

我没有发现与灰线有任何关系。我想知道那条线到底是什么？有什么办法可以去除吗？

Answer 1

你有不必要的 border: 2.5px solid #A0A0A0; 应用于 #nav ul ul(涵盖第一级和第二级下拉菜单)

这是工作的 jsfiddle https://jsfiddle.net/Lt4udmpt/