Question

当悬停（业务单位和投资者关系）时，在子菜单的标题下添加粗线需要花费大量时间，但仍然无效。怎么做？

我的代码：

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
     <li><a runat="server" href="~/">Home</a></li>
     <li><a runat="server" href="~/About">About Company</a></li>
     <li id="businessU">
     <a href="#">Business Units  </a>
     <ul class="sub-menu">
     <li><a runat="server" href="~/BusinessUnits/Engineering">Solution  Engineering Sdn Bhd</a></li>
     <li><a runat="server" href="~/BusinessUnits/Bioforce">Solution Bioforce Sdn Bhd </a></li>
     <li><a runat="server" href="~/BusinessUnits/Biogen">Solution Biogen Sdn Bhd</a></li>
     <li><a runat="server" href="~/BusinessUnits/AC">Solution A&C Technology Sdn Bhd</a></li>
     <li><a runat="server" href="#">Solution E&E Technology Sdn Bhd</a> </li>
     </ul>
     </li>
     <li id="Investor">
     <a href="#">Investor Relations</a>
     <ul class="sub-menu2">

     <li><a runat="server" href="~/InvestorRelation/Directors">Directors</a></li>
     <li><a runat="server" href="~/InvestorRelation/CorporateStructure">Corporate Structure </a></li>
     <li><a runat="server" href="~/InvestorRelation/News">News</a></li>
     <li><a runat="server" href="~/InvestorRelation/Events">Events</a></li>
   <li><a runat="server" href="~/InvestorRelation/Anno">Announcements</a></li>

   </ul>
   </li>
   <li><a runat="server" href="~/Contact">Contact Us</a></li>
   </ul>

Answer 1

.nav.navbar-nav a:not(:last-child) {
    border-bottom: solid 2px transparent;
}

.nav.navbar-nav a:not(:last-child):hover {
    border-bottom: solid 2px red;
}

如何使用css在子菜单的标题下显示粗线

1 个答案: