懸停時自舉導航欄下拉

我想在導航欄頂部的邊框和每個菜單項目邊框頂部顏色的懸停應該改變。懸停時自舉導航欄下拉

這裏是我是如何接近

.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} 
 
.navbar-nav > li > a:hover { 
 
    border-top: 3px solid #F68220; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-inverse" style="background:#ffffff;border:none;border-top:solid 2px grey;"> 
 
    <div class="container-fluid"> 
 

 
    <ul class="nav navbar-nav"> 
 
     <li class=""><a href="#">Home</a> 
 
     </li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1</a> 
 
     <ul class="dropdown-menu" style:> 
 
      <li><a href="#">Page 1-1</a> 
 
      </li> 
 
      <li><a href="#">Page 1-2</a> 
 
      </li> 
 
      <li><a href="#">Page 1-3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Page 2</a> 
 
     </li> 
 
     <li><a href="#">Page 3</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2016-01-19 Anuj Mayank

https://jsfiddle.net/rm6rvssj/1/ –

https://jsfiddle.net/rm6rvssj/2/ –

@LaljiTadhani時，屏幕的尺寸則縮小頂部邊框正在改變其地方 –

你需要一個小的修正你的CSS。您需要添加一個新的選擇器並按照以下方式修改現有的選擇器。

如果您在全屏模式下查看它，應該按照正常工作順序查看它。

.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} 
 
.navbar-nav > li { 
 
    top: -2px; 
 
} 
 
.navbar-nav > li > a:hover { 
 
    border-top: 2px solid #F68220; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-inverse" style="background:#ffffff;border:none;border-top:solid 2px grey;"> 
 
    <div class="container-fluid"> 
 

 
    <ul class="nav navbar-nav"> 
 
     <li class=""><a href="#">Home</a> 
 
     </li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1</a> 
 
     <ul class="dropdown-menu" style:> 
 
      <li><a href="#">Page 1-1</a> 
 
      </li> 
 
      <li><a href="#">Page 1-2</a> 
 
      </li> 
 
      <li><a href="#">Page 1-3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Page 2</a> 
 
     </li> 
 
     <li><a href="#">Page 3</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2016-01-19 10:35:13 Stewartside

感謝它的工作 –

懸停時自舉導航欄下拉

回答

相關問題