如何在鼠標懸停在自舉導航菜單上時顯示寬框？

Question

代碼：

<div class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="n-bar"></span> 
       <span class="n-bar"></span> 
       <span class="n-bar"></span> 
      </button> 
      <a class="navbar-brand" href="test"><img src="img/logo.png" alt=""/></a> 
     </div> 
     <div class="navbar-collapse collapse "> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">menu1</a></li> 
       <li><a href="#">menu2</a></li> 
       <li><a href="#">menu3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

在此代碼我已創建的自舉導航菜單即MENU1，MENU2 &菜單3。現在，當我將鼠標懸停在任何導航菜單上時，它會在菜單底部顯示一個框，例如：https://www.flipkart.com/。那麼，我該怎麼做？請幫幫我。

謝謝

Answer 1

試試這個：

<div class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="n-bar"></span> 
       <span class="n-bar"></span> 
       <span class="n-bar"></span> 
      </button> 
      <a class="navbar-brand" href="test"><img src="img/logo.png" alt=""/></a> 
     </div> 
     <div class="navbar-collapse collapse dropdown"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      Button 
      </button> 
      <ul class="nav navbar-nav dropdown-list"> 
       <li><a href="#">menu1</a></li> 
       <li><a href="#">menu2</a></li> 
       <li><a href="#">menu3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS：

.dropdown-list { 
    position: absolute; 
    display:none; 
} 

.dropdown { 

    position: relative; 
} 

.dropdown:hover .dropdown-list{ 
    display:block; 
} 

這裏的jsfiddle https://jsfiddle.net/mhz86puo/2/