Question

我的网站的演示导航栏就像这里https://jsfiddle.net/xzfy2ee2/。

由于＆＃39; Faunas＆＃39;正在继续增长，我认为创建一个侧面菜单可能会更好。所以我使用了各种各样的css：hover来实现结果。

虽然功能足够强大，但在亚洲＆＃39;亚洲＆＃39;当我将鼠标移动到＆＃39; Faunas＆＃39;并调出下拉菜单。当我将鼠标移到亚洲＆＃39;亚洲时，它仍然存在。显示侧面菜单＆＃39; Japan＆＃39;。

导航栏的HTML / CSS显示在此处：

＆＃13;

    #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;
    }

＆＃13;

    <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>

＆＃13;

我没有找到与灰线有关的事情。我想知道这条线到底是什么？有没有办法删除它？

Answer 1

您已将不必要的border: 2.5px solid #A0A0A0;应用于#nav ul ul（涵盖了第一级和第二级下拉菜单）

这里有工作的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;


}

代码的这一部分border-bottom: 2.5px solid #A0A0A0;就是问题！这导致孩子ul标签也有边框！

<强>解决方案：

在css中：

从#nav ul ul移除了边框，并将边框添加到特定的第二个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;

}

在Html中：

将id分配给ul

<ul id="second" style ="width:160px" >

如果您只是不需要boder而不是从border-bottom: 2.5px solid #A0A0A0;
删除#nav ul ul这一行

在jsfiddle

更新

Answer 3

看起来#nav ul ul border-bottom元素是罪魁祸首。

#nav ul ul
{
border-bottom: 2.5px solid #A0A0A0; <-----delete
}

使用多层菜单时出现奇怪的灰色底线：悬停

3 个答案: