Question

我似乎无法想象如何在悬停时为所有子菜单项添加一个border-bottom：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>

Answer 1

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

#menu ul li＆gt; ul a：hover { border-bottom：1px solid #fff; }

在CSS水平下拉菜单中悬停时，将边框底部：1px solid #FF添加到子菜单

1 个答案: