Html 将边框底部:1px solid#FF添加到CSS水平下拉菜单中悬停的子菜单

Html 将边框底部:1px solid#FF添加到CSS水平下拉菜单中悬停的子菜单,html,css,Html,Css,我似乎不知道如何在悬停时为所有子菜单项添加边框底部:1px solid#FFF #menu{ padding:0; margin:0; position: fixed; top: 30px; left: 0px; font-size: 8pt; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style: none

我似乎不知道如何在悬停时为所有子菜单项添加边框底部:1px solid#FFF

#menu{
   padding:0;
   margin:0;
   position: fixed;
   top: 30px;
   left: 0px;
   font-size: 8pt;
}
#menu ul{
   padding:0;
   margin:0;
}
#menu li{
   position: relative;
   float: left;
   list-style: none;
   margin: 0;
   padding:0;
} 

#menu li a{
   width:120px;
   height: 20px;
   display: block;
   text-decoration:none;
   line-height: 20px;
   background-color: #A9BBD3;
   color: #FFF;
} 

#menu li a:hover{
   background-color: #446087;
} 

#menu ul ul{
   position: absolute;
   top: 20px;
   visibility: hidden;
}
#menu ul ul li a {
    width: 115px;
    padding-left: 5px;
}
#menu ul li:hover ul{
   visibility:visible;
}
#menu > ul > li > a{
    text-align:center;
}

<div id="menu">
   <ul>
      <li><a href="#nogo">File</a>
        <ul>
          <li><a href="#nogo">Save</a></li>
          <li><a href="#nogo">Link 1-2</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Edit</a>
        <ul>
      <li><a href="#nogo">Add</a></li>
          <li><a href="#nogo">Delete</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Reports</a>
        <ul>
          <li><a href="#nogo">Link 3-1</a></li>
          <li><a href="#nogo">Link 3-2</a></li>
          <li><a href="#nogo">Link 3-3</a></li>
       </ul>
      </li>
    </ul>
</div>
#菜单{
填充:0;
保证金:0;
位置:固定;
顶部:30px;
左:0px;
字号:8pt;
}
#菜单ul{
填充:0;
保证金:0;
}
#菜单里{
位置:相对位置;
浮动:左;
列表样式:无;
保证金:0;
填充:0;
} 
#菜单李a{
宽度:120px;
高度:20px;
显示:块;
文字装饰:无;
线高:20px;
背景色:#A9BBD3;
颜色:#FFF;
} 
#菜单a:悬停{
背景色:#446087;
} 
#菜单{
位置:绝对位置;
顶部:20px;
可见性:隐藏;
}
#菜单ul li a{
宽度:115px;
左侧填充:5px;
}
#菜单ul li:悬停ul{
能见度:可见;
}
#菜单>保险单>保险单>保险单>保险单{
文本对齐:居中;
}

将此添加到CSS中,看看是否有帮助:

​ #菜单ul li>ul a:悬停{ 边框底部:1px实心#fff;
} ​

工作起来很有魅力。我在想,最好是将它应用到hover的主顶部菜单上,这样它会提醒用户他们正在使用什么菜单,而且它的样式会更好。你如何将其应用于悬停,仅应用于顶部菜单(索引菜单)?我不清楚你想要什么。是否希望边框底部仅显示在顶级菜单项下?还是要将其应用于所有悬停的菜单项?在我看来,把边框放在主菜单项下面并不能使它比现在更清晰。。。也许将主菜单项与其显示的子菜单项之间的背景色统一起来可能会更清晰,但似乎也很明显,子菜单项属于哪个主菜单项,因为它们位于主菜单项的正下方,并且在宽度上与主菜单项相匹配。