ナビゲーションバーのクリック可能なメニューが機能しない

Question

ナビゲーションバーのドロップダウンメニューを実装しようとしていますが、ユーザーのクリックに表示されるドロップダウンメニューを実装しています（ログアウトしたFacebookのプルダウンメニューなど）。しかし、ドロップダウンはそれほどうまくいかない。私はStackOverflowとインターネットでどこでも検索しましたが、解決策を見つけることができませんでした。私はjQueryや他の言語を理解していないので、CSSとJavaScriptのみを使用して実装したいと思います。ここで

は私のバイオリンです：

HTML

<div id="navbar"> 
<ul> 
    <li> 
     <a href="movies.php">Home</a> 
    </li> 
    <li> 
     <a href="faq.php">FAQs</a> 
    </li> 
    <li class="user" style="float:right;"> 
     <a href="#" class="dropbtn" onclick="UserDropdown()">Dropdown</a> 
     <ul id="UserContent" class="user-content"> 
      <li> 
      <a href="profile.php">Profile</a> 
      </li> 
      <li> 
      <a href="gifts.php">My Gifts</a></li> 
      <li> 
      <a href="logout.php">Logout</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

CSS

を次のように私が実装した https://jsfiddle.net/8ahy32yn/9/

コードがあります

ul 
{ 
    list-style-type: none;  
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: black; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 55px; 
} 

li 
{ 
    float: left; 
} 

li a 
{ 
    text-decoration: none; 
    display: block; 
    padding: 20px 25px; 
    color: white; 
    text-align: center; 
} 

li a:hover 
{ 
    background-color: #333333; 
} 

.user 
{ 
    position: relative; 
    display: inline; 
} 

.dropbtn 
{ 
    cursor: pointer; 
} 

.user-content 
{ 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 100px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.user-content a 
{ 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.user-content a:hover 
{ 
    background-color: #F1F1F1; 
} 

.show 
{ 
    display:block; 
} 

はJavaScript

function UserDropdown() { 
    document.getElementById("UserContent").classList.toggle("show"); 
} 

window.onclick = function(event) 
{ 
    if (!event.target.matches('.dropbtn')) 
    { 
    var dropdowns = document.getElementsByClassName("user-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) 
    { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) 
     { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

P.S.すべてのヘルプははるかに高く評価されるだろう

：それはこのように私はlocalhostに現れるのに対し、フィドルも、クリックでドロップダウンを表示しません。ありがとう。 :)

Answer 1

あなたは何かをしたいlike this？あなたが望むふるまいは現在働いています、私はちょうど私が思うより良いスタイルにいくつかのCSSを適用します。

ul上 height: autoで

.show 
{ 
    display:block; 
    width: 245px; 
    right: 0; 
    left: auto; 
    line-height: 30px; 
    overflow: hidden 
} 

、あなたはそれをあなたが望む方法を行うことができますul親にoverflow: hiddenを取り除く：See it here

Answer 2

閉じ括弧はjavascriptのセクション、フィドルで働いていない理由に欠けている

このリンクは役立つかもしれない

http://www.w3schools.com/howto/howto_js_dropdown.asp