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

我的网站的演示导航栏是这样的

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

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

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

#导航a:悬停
{
颜色：银色；
}
#导航ul
{
列表样式类型：无；
}
#李国荣
{
显示：内联块；
}
#导航ulli：悬停ul
{
显示：块；
}
#导航ul
{
显示：无；
位置：绝对位置；
背景色：#888888；
边框：2.5px实心#A0；
边界顶部：0；
左边距：0px；
右边距：2px；
最小宽度：80px；
}
#李国宝
{
显示：块；
}
#李国宝
{
显示：无；
位置：绝对位置；
背景色：#888888；
边框：0px实心#A0；
边界顶部：0；
左边距：115px；
右边距：2px；
利润上限：-20px；
右侧填充：5px；
最小宽度：80px；
}
#导航ulli：悬停ulli
{
显示：块；
}
#导航李：悬停
{
显示：块；
}

宽度：160px>

看起来像是

#nav ul-ul-border-bottom

元素是罪魁祸首

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

#导航ul
{
边框底部：2.5px实心#a0a0；看起来像
#nav ul ul边框底部
元素是罪魁祸首

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

#导航ul
{
边框底部：2.5px实心#A0A0A0；您有不必要的
边框：2.5px实心#A0A0A0；
应用于
#nav ul
（包括第一级和第二级下拉列表）

这里是工作的JSFIDLE
您有不必要的
边框：2.5px solid#a0a0；
应用于
#nav ul
（包括第一级和第二级下拉列表）

这是我的工作指南

在代码
边框的这一部分中，底部：2.5px实心#a0a0；
是问题所在！它导致子
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;
   
}

 

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

在Html中：

将
id
分配给
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;
   
}

 

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



如果您不需要boder，请删除
边框底部：2.5px实心#a0a0；
此行来自
#nav ul

更新于

在代码
边框的这一部分中，底部：2.5px实心#a0a0；
是问题所在！它导致子
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;
   
}

 

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

在Html中：

将
id
分配给
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;
   
}

 

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



如果您不需要boder，请删除
边框底部：2.5px实心#a0a0；
此行来自
#nav ul

更新时间
您需要了解标签之间的父子关系以及如何使用css处理标签。我希望这能解决您的问题并澄清您的概念！您需要了解标签之间的父子关系以及如何使用css处理标签。我希望这能解决您的问题并澄清您的概念！谢谢，这是详细的，并提供了足够的选项！我会继续，然后分配一个id。我真的需要再次检查CSS基础知识。谢谢，这是详细的，并提供了足够的选项！我会继续，然后分配一个id。我真的需要再次检查CSS基础知识。