CSS導航欄下拉不起作用？

-6

我想代碼布爾瑪的導航欄的下拉菜單，但它似乎有問題，現在誰能幫我找出原因？CSS導航欄下拉不起作用？

<nav class="nav has-shadow"> 
    <div class="container"> 
     <div class="nav-left"> 
      <a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Activity</a> 
      <div class="navbar-item has-dropdown is-hoverable" style="margin-left: auto; display: inline-flex;"> 
       <a class="navbar-link"><i class="fa fa-user"></i> &nbsp;&nbsp; Dave Fox</a> 
       <div class="navbar-dropdown" style="left: initial; right: 0;"> 
        <div class="navbar-item"> 
         <div> 
          <small><a href="/account/language">Account Settings - Language</a></small> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav>

這裏是我的JS文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://holorp.com/assets/bulma/0.5.0/js/bulma.js"></script> 
<script src="https://holorp.com/assets/holorp/2.1/js/holorp.js"></script>

，然後我只使用默認的布爾瑪CSS

來源

2017-10-05 q965086

你能比「不工作」更具體嗎？ – jmargolisvt

如果你真的讀過這個問題，它解釋了那裏的一切。我附上了一張動畫圖片，展示了它的工作方式。 – q965086

附加的圖像對這個問題的未來讀者沒有幫助，因爲鏈接將會死亡。 SO的書面描述是首選。 – jmargolisvt

您是否嘗試過這個JavaScript？
我使用這個：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    padding: 12px 16px; 
    z-index: 1; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 
</style> 
</head> 
<body> 

<h2>Hoverable Dropdown</h2> 
<p>Hover your mouse below the text below</p> 

<div class="dropdown"> 
    <span>Here!</span> 
    <div class="dropdown-content"> 
    <p>Hello World!</p> 
    </div> 
</div> 

</body> 
</html>

來源

2017-11-08 01:46:09 Jay

CSS導航欄下拉不起作用？

回答

相關問題