Simple jQuery Drop Down Menu

index.html

<div id="nav">
<a class="dropdown-toggle" href="#">Menu</a>
<ul class="dropdown">
  <li><a href="#">Menu Item</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Search</a></li>
</ul>
</div>

script.js

$(function() { // Dropdown toggle
$('.dropdown-toggle').click(function() { $(this).next('.dropdown').slideToggle();
});

$(document).click(function(e) 
{ 
var target = e.target; 
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) 
//{ $('.dropdown').hide(); }
  { $('.dropdown').slideUp(); }
});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

simple-jquery-drop-down-menu.markdown

Simple jQuery Drop Down Menu

A fork of Scott Bolinger's simple jquery dropdown menu. It isn't hidden when clicked away.

A Pen by feillyne on CodePen.

License.

style.css

body { padding: 2em; } a { text-decoration: none; color: #fff; }
/**** ****/
div#nav { position: relative; } div#nav a { padding: 5px 15px 5px; }
.dropdown-toggle { padding: 0; background: #777; }
/**** ****/
ul.dropdown { display: none; position: absolute; top: 100%;
  margin-top: 5px; padding: 5px 5px 0 0; background: #777; }
ul.dropdown li { list-style-type: none; }
ul.dropdown li a { text-decoration: none; padding: 0em 1em; display: block; }