CSSのナビゲーションバーのドロップダウンが機能していませんか？

-6

Bulmaのナビゲーションバーのドロップダウンメニューをコーディングしようとしていますが、今のところ問題があるようです。ここで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>

し、私はちょうどあなたがこのJavaScriptを試してみましブルマCSS

出典

2017-10-05 q965086

：
私はこれを使うのか？ – jmargolisvt

実際に質問を読んだら、その中のすべてを説明します。どのように動作していないかを正確に示すアニメーション画像を添付しました。 – q965086

添付した画像はこのリンクの今後の読者には役立ちません。書かれた説明がSOに好まれます。 – jmargolisvt

デフォルトを使用していますか？あなたは「動作しない」よりも具体的なことができます

<!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のナビゲーションバーのドロップダウンが機能していませんか？

答えて

関連する問題