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导航栏下拉不起作用？

回答

相关问题