Выпадающее меню с возможностью кликов в навигационной панели не работает

Question

Я пытаюсь реализовать раскрывающееся меню внутри панели навигации, которое должно отображаться на клике пользователя и исчезать при нажатии в любом месте снаружи (например, выпадающее меню Facebook с выходом из системы и т. Д.). Но выпадающее меню не работает так, как должно. Я искал всюду на StackOverflow и в Интернете, но не смог найти решение. Я хочу реализовать его только с помощью CSS и JavaScript, так как я не понимаю jQuery и другие языки.

Вот моя скрипка: https://jsfiddle.net/8ahy32yn/9/

Коды Я реализованы следующим образом:

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

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. Fiddle даже не показывает выпадающий список при нажатии кнопки в то время как он показывает на моем локальном хосте, как это:

Любая помощь будет высоко ценится. Благодарю. :)

Answer 1

Вы хотите что-то like this? Поведение, которое вы хотите, в настоящее время работает, я просто применяю CSS, чтобы лучше стилизовать его, я думаю.

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

С height: auto на ul и удаление overflow: hidden на ul родитель, вы можете сделать это так, как вы хотите: See it here

Answer 2

закрывающей фигурной скобкой отсутствует в яваскрипта разделе, причина не работает в скрипку

Эта ссылка может помочь

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