title: Clickable dropdown Menu in Navigation Bar not working
body: <p>I'm trying to implement a dropdown menu inside the navigation bar which should show up on user click and disappear on clicking anywhere outside(like Facebook's dropdown menu having logout,etc.). But the dropdown isn't working the way it should. I have searched everywhere on StackOverflow and the internet but unable to find a solution. I want to implement it using CSS and JavaScript only, since I don't understand jQuery and other languages.</p>
  
  <p>Here is my fiddle: <a href="https://jsfiddle.net/8ahy32yn/9/" rel="nofollow noreferrer">https://jsfiddle.net/8ahy32yn/9/</a></p>
  
  <p>The codes I have implemented are as follows:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="navbar"&gt;
  &lt;ul&gt;
     &lt;li&gt;
        &lt;a href="movies.php"&gt;Home&lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
        &lt;a href="faq.php"&gt;FAQs&lt;/a&gt;
     &lt;/li&gt;
     &lt;li class="user" style="float:right;"&gt;
        &lt;a href="#" class="dropbtn" onclick="UserDropdown()"&gt;Dropdown&lt;/a&gt;
        &lt;ul id="UserContent" class="user-content"&gt;
            &lt;li&gt;
              &lt;a href="profile.php"&gt;Profile&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="gifts.php"&gt;My Gifts&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;
              &lt;a href="logout.php"&gt;Logout&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>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 &lt; dropdowns.length; i++) 
       {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show'))
        {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
  </code></pre>
  
  <p>P.S. The Fiddle doesn't even show the dropdown on clicking whereas it shows up on my localhost like this:</p>
  
  <p><a href="https://i.stack.imgur.com/4a24u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4a24u.png" alt="Localhost dropdown output"></a></p>
  
  <p>Any help would be much appreciated. Thanks. :)</p>