html - 在 CSS 水平下拉菜单中悬停时将border-bottom: 1px solid #FF 添加到子菜单

Question

我似乎不知道如何在悬停时向所有子菜单项添加边框底部：1px 实心#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>

Answer 1

将此添加到您的 CSS 中，看看是否有帮助：

​ #menu ul li > ul a:hover {border-bottom:1px solid #fff; } ​</p>