8+ JavaScript Dropdown Menu Examples

This post contains a total of 8+ Hand-Picked JavaScript Dropdown Menu Examples with Source Code. All these Dropdown menus are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Dropdown Menu Examples

1. By Lukasz

Made by Lukasz. Smooth Dropdown menu with hover effect and icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<meta name="viewport" content="width=device-width" />
		<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background-color: black; }

a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  font-family: 'Open Sans';
  font-size: 14px;
  cursor: default;
  color: #838ea7; }

nav {
  width: 100%;
  top: 30%;
  left: 42%;
  background-color: #FEFEFE;
  position: absolute;
  border-radius: 2px;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  width: 300px; }

nav ul li ul {
  display: none;
  margin-top: 20px; }
  nav ul li ul li {
    display: block; }
    nav ul li ul li:hover {
      background-color: #F4F4F4; }
    nav ul li ul li svg {
      margin-left: 20px;
      margin-right: 20px; }

nav li li {
  background-color: #FEFEFE; }

.home {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-bottom: 1px #d7d9dd solid;
  position: relative; }
  .home svg {
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px; }
  .home:hover a {
    color: #6d6c6c; }
  .home:hover .blue-box {
    background-color: #3FA6FD;
    position: absolute;
    margin-left: 0;
    height: 100%;
    width: 4px; }
  .home:hover #home {
    fill: #6d6c6c; }

.settings {
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
  border-top: 1px #d7d9dd solid; }
  .settings svg {
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px; }
  .settings:hover a {
    color: #6d6c6c; }
  .settings:hover .blue-box {
    background-color: #3FA6FD;
    position: absolute;
    margin-left: 0;
    height: 100%;
    width: 4px; }
  .settings:hover #gear {
    fill: #6d6c6c; }

.messages svg {
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px; }

.messages:hover a {
  color: #6d6c6c; }

.messages:hover .blue-box {
  background-color: #3FA6FD;
  position: absolute;
  margin-left: 0;
  height: 100%;
  width: 4px; }

.messages:hover #mail {
  fill: #6d6c6c; }

.hamburger {
  margin-right: 20px;
  margin-left: 20px; }

.arrow {
  width: 0;
  height: 0;
  margin-left: 275px;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  border-bottom: 9px solid #FEFEFE;
  position: absolute;
  top: -9px; }

.fa-chevron-up {
  margin-left: 110px; }

.marked {
  background-color: #3FA6FD;
  border-radius: 2px; }

.marked1 {
  color: #ffffff; }

.rotate {
  moz-transition: all 0.3s linear;
  webkit-transition: all 0.3s linear;
  transition: all 0.3s linear; }

.rotate.down {
  moz-transform: rotate(180deg);
  webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

/*# sourceMappingURL=main.css.map */
</style>
</head>
	<body>
	
		<nav>
			<ul>
				<li class="menu" id="dropMenu">
					<div class="drop-box">
					<a class="drop-text" href="#"><i class="hamburger fa fa-bars" aria-hidden="true"></i>Dropdown menu<i class="fa fa-chevron-up rotate"></i></a>
					</div>
					<ul id="ul">
						<li class="home"><div class="arrow"></div><a href="#"><div class="blue-box"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 33 33" style="enable-background:new 0 0 33 33;" xml:space="preserve" width="512px" height="512px">
						<g>
						<path id="home" d="M27.813,31.617H5.186c-0.276,0-0.5-0.224-0.5-0.5V12.521c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5v18.096h21.627   V12.521c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5v18.596C28.313,31.393,28.09,31.617,27.813,31.617z" fill="#838ea7"/>
						<path id="home" d="M32.5,17.492c-0.123,0-0.247-0.045-0.344-0.136L16.499,2.57L0.844,17.355c-0.201,0.19-0.52,0.18-0.707-0.02   c-0.189-0.201-0.181-0.517,0.02-0.707L16.155,1.519c0.193-0.183,0.494-0.182,0.688,0l16.001,15.109   c0.2,0.19,0.209,0.506,0.02,0.707C32.765,17.439,32.633,17.492,32.5,17.492z" fill="#838ea7"/>
						<path id="home" d="M20.491,31.617H12.51c-0.276,0-0.5-0.224-0.5-0.5V20.281c0-0.276,0.224-0.5,0.5-0.5h7.981c0.276,0,0.5,0.224,0.5,0.5   v10.836C20.991,31.393,20.767,31.617,20.491,31.617z M13.01,30.617h6.981v-9.836H13.01V30.617z" fill="#838ea7"/>
						</g></svg>Home</a></li>
						<li class="messages"><a href="#"><div class="blue-box"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.012 31.012" style="enable-background:new 0 0 31.012 31.012;" xml:space="preserve" width="512px" height="512px">
						<g>
						<path id='mail' d="M28.512,26.529H2.5c-1.378,0-2.5-1.121-2.5-2.5V6.982c0-1.379,1.122-2.5,2.5-2.5h26.012c1.378,0,2.5,1.121,2.5,2.5v17.047   C31.012,25.408,29.89,26.529,28.512,26.529z M2.5,5.482c-0.827,0-1.5,0.673-1.5,1.5v17.047c0,0.827,0.673,1.5,1.5,1.5h26.012   c0.827,0,1.5-0.673,1.5-1.5V6.982c0-0.827-0.673-1.5-1.5-1.5H2.5z" fill="#838ea7"/>
						<path id='mail' d="M15.506,18.018c-0.665,0-1.33-0.221-1.836-0.662L0.891,6.219c-0.208-0.182-0.23-0.497-0.048-0.705   c0.182-0.21,0.498-0.23,0.706-0.049l12.778,11.137c0.64,0.557,1.72,0.556,2.358,0L29.46,5.466c0.207-0.183,0.522-0.162,0.706,0.049   c0.182,0.208,0.16,0.523-0.048,0.705L17.342,17.355C16.836,17.797,16.171,18.018,15.506,18.018z" fill="#838ea7"/>
						</g>
						</svg>Messages</a></li>
						<li class="settings"><a href="#"><div class="blue-box"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 611.997 611.996" style="enable-background:new 0 0 611.997 611.996;" xml:space="preserve">
						<g>
						<g>
						<path id='gear' d="M590.113,257.801c15.844-5.637,25.012-19.654,20.905-32.155l-11.975-36.339c-3.043-9.2-12.649-15.144-24.475-15.144    c-3.824,0-7.684,0.608-11.483,1.813l-102.401,14.087c-5.107-6.793-10.737-13.321-17.074-19.792l29.03-99.327    c4.068-8.391,4.963-17.502,2.446-25.101c-1.842-5.566-5.503-9.952-10.281-12.341l-34.131-17.166    c-2.731-1.396-5.725-2.103-8.889-2.103c-10.055,0-20.142,7.083-25.87,18.106l-62.627,82.31c-8.352-1.23-17.046-1.909-25.932-2.018    l-49.635-90.785c-4.545-12.893-15.169-21.842-26.023-21.842c-2.082,0-4.125,0.325-6.097,0.968l-36.279,11.971    c-5.114,1.683-9.395,5.51-12.048,10.78c-3.609,7.157-4.072,16.293-1.301,25.164l14.052,102.37    c-6.966,5.227-13.618,10.96-19.852,17.116l-99.302-29.065c-5.181-2.517-10.719-3.846-16.066-3.846    c-9.638,0-17.594,4.323-21.301,11.593L16.304,181.26c-2.442,4.771-2.789,10.468-0.968,16.039    c2.488,7.616,8.634,14.423,16.918,18.763l82.412,62.567c-1.279,8.86-1.972,17.59-2.053,26.048l-90.679,49.586    c-8.85,3.1-15.946,8.947-19.53,16.123c-2.604,5.217-3.11,10.867-1.431,15.869l11.946,36.447    c3.075,9.176,12.677,15.105,24.468,15.105c3.803,0,7.645-0.604,11.426-1.795l102.486-14.01    c5.139,6.842,10.833,13.465,17.003,19.756l-28.988,99.258c-7.408,15.041-4.096,31.404,7.758,37.516l34.124,17.061    c2.778,1.438,5.817,2.166,9.03,2.166c10.016,0,20.082-7.086,25.807-18.113l62.656-82.256c8.75,1.229,17.459,1.875,25.97,1.922    l49.61,90.746c4.556,12.945,15.134,21.934,25.91,21.934c2.085,0,4.135-0.332,6.054-0.979l36.364-12    c5.104-1.646,9.38-5.439,12.041-10.674c3.638-7.152,4.121-16.316,1.347-25.24L421.896,460.61    c6.87-5.135,13.501-10.807,19.788-16.932l99.355,28.953c5.191,2.537,10.74,3.873,16.105,3.873c9.659,0,17.611-4.348,21.266-11.613    l17.321-34.279c5.842-11.691-1.142-26.836-15.918-34.725l-82.493-62.52c1.215-8.678,1.887-17.406,2.004-26.055L590.113,257.801z     M485.427,342.11l86.304,65.41c0.325,0.246,0.671,0.465,1.035,0.652c8.617,4.43,12.346,12.057,10.324,16.104l-17.314,34.264    c-1.209,2.404-4.439,3.838-8.638,3.838c-3.354,0-6.917-0.912-10.303-2.639c-0.396-0.203-0.81-0.369-1.237-0.492l-103.975-30.299    c-2.502-0.736-5.195-0.029-7.012,1.826c-7.623,7.744-15.833,14.768-24.396,20.867c-2.143,1.527-3.263,4.113-2.902,6.719    l14.745,107.275c0.061,0.424,0.155,0.84,0.29,1.248c1.777,5.406,1.657,11.178-0.314,15.055c-0.665,1.314-1.862,3.008-3.828,3.641    l-36.445,12.027c-4.248,1.445-11.238-3.479-14.296-12.643c-0.134-0.398-0.304-0.785-0.505-1.156l-51.926-94.432    c-1.244-2.268-3.619-3.131-6.202-3.131c-0.043,0-0.085,0-0.128,0c-10.479,0-21.156-1.152-31.974-2.902    c-2.587-0.424-5.171,0.352-6.75,2.422l-65.578,85.961c-0.272,0.355-0.509,0.664-0.704,1.062    c-3.566,7.158-9.475,10.865-13.473,10.865c-0.943,0-1.771-0.209-2.619-0.646l-34.134-17.074    c-4.139-2.135-5.673-10.498-1.262-19.086c0.205-0.398,0.367-0.818,0.498-1.25l30.342-103.895c0.731-2.502,0.025-5.205-1.841-7.029    c-7.804-7.648-14.851-15.84-20.948-24.357c-1.527-2.131-4.128-3.256-6.701-2.889L46.281,422.091    c-0.435,0.061-0.862,0.16-1.276,0.297c-2.555,0.852-5.114,1.283-7.616,1.283c-5.521,0-9.967-2.195-11.048-5.414l-11.946-36.449    c-0.629-1.869,0.014-3.811,0.661-5.104c1.947-3.891,6.535-7.432,11.974-9.242c0.399-0.135,0.792-0.303,1.159-0.506l94.902-51.885    c2.297-1.26,3.715-3.684,3.676-6.307c-0.152-10.277,0.693-21.06,2.513-32.059c0.424-2.587-0.615-5.199-2.704-6.782l-86.261-65.49    c-0.343-0.262-0.71-0.491-1.099-0.686c-5.089-2.562-9.09-6.711-10.437-10.833c-0.661-2.018-0.622-3.771,0.138-5.252l17.208-34.215    c1.226-2.407,4.474-3.842,8.687-3.842c3.347,0,6.902,0.905,10.281,2.623c0.389,0.198,0.799,0.357,1.216,0.48l103.939,30.423    c2.506,0.732,5.231,0.018,7.058-1.862c7.51-7.744,15.724-14.823,24.415-21.043c2.135-1.527,3.245-4.11,2.888-6.708L189.903,46.364    c-0.06-0.427-0.156-0.848-0.293-1.258c-1.803-5.45-1.693-11.062,0.293-15.007c0.675-1.339,1.891-3.075,3.849-3.714l36.279-11.967    c0.53-0.191,1.078-0.276,1.668-0.276c4.146,0,10.052,4.492,12.833,12.812c0.131,0.399,0.3,0.785,0.502,1.152l51.929,94.475    c1.241,2.269,3.619,3.177,6.203,3.177c0.018,0,0.036,0,0.053,0l1.516,0.495c10.525,0,20.76,1.096,30.423,2.76    c2.615,0.459,5.23-0.463,6.828-2.559l65.571-86.119c0.269-0.354,0.506-0.7,0.7-1.096c3.565-7.153,9.503-10.878,13.536-10.878    c0.919,0,1.725,0.191,2.498,0.583l34.184,17.198c1.81,0.901,2.735,2.757,3.198,4.149c1.361,4.114,0.615,9.822-1.947,14.89    c-0.194,0.385-0.356,0.788-0.477,1.205l-30.381,103.939c-0.728,2.499-0.028,5.195,1.827,7.019    c8.101,7.977,14.982,15.964,21.04,24.415c1.526,2.131,4.096,3.234,6.708,2.884l107.193-14.745c0.438-0.06,0.866-0.159,1.283-0.3    c2.562-0.859,5.132-1.294,7.648-1.294c5.531,0,9.974,2.188,11.048,5.439l11.971,36.325c1.438,4.375-3.39,11.43-12.613,14.554    c-0.386,0.13-0.761,0.293-1.117,0.491l-94.979,51.805c-2.283,1.248-3.701,3.651-3.684,6.259    c0.078,10.649-0.756,21.478-2.474,32.183C482.303,337.937,483.346,340.534,485.427,342.11z" fill="#838ea7"/>
						<path d="M305.976,228.735c-42.613,0-77.28,34.65-77.28,77.241c0,42.634,34.671,77.323,77.28,77.323    c42.616,0,77.284-34.686,77.284-77.323C383.259,263.385,348.588,228.735,305.976,228.735z M305.976,369.163    c-34.82,0-63.144-28.346-63.144-63.187c0-34.798,28.327-63.104,63.144-63.104c34.816,0,63.146,28.31,63.146,63.104    C369.122,340.817,340.792,369.163,305.976,369.163z" fill="#838ea7"/>
						</g></svg>Settings</a></li>
					</ul>
				</li>
			</ul>
		</nav>
      <script>
$(function () {

  $('.drop-box').click(function () {
    $('#ul').
    fadeToggle();
  });

  $('.drop-box').on('click', function () {
    $(this).toggleClass('marked');
    $('.drop-text').toggleClass('marked1');
  });

  $(".drop-box").click(function () {
    $('.rotate').toggleClass("down");
  });

});

    </script>
</body>
</html>

2. By Bobby

Made by Bobby. Accessible JavaScript Drop Down Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
<style>
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body{
	font-family: 'calibri', sans-serif;
}

h1{
	margin: 2em 0 0;
	text-align: center;
	text-transform: uppercase;
}

p{
	text-align: center;
	margin: 0;
}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.access-menu{
	display: table;
	margin: 1em auto;
}

.access-menu > li{
	background: #333;
	display: inline-block;
	position: relative;
}

.access-menu > li + li{
	border-left: solid 1px #000;
}

.access-menu > li:hover .access-submenu{
	top: 100%;
	left: auto;
}

.access-menu a{
	color: #eee;
	display: block;
	padding: .5em 2em;
	text-decoration: none;

	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}

.access-menu a:hover,
.access-menu a:focus{
	background: #369;
	outline: none;
}

.access-submenu{
	background: #444;
	left: -9999px;
	position: absolute;
	top: -9999px;
	width: 150%;
}

.access-submenu > li + li{
	border-top: solid 1px #000;
}

.access-submenu > li:last-child{
	border-bottom: solid 3px #000;
}

.access-submenu a{
	padding: .5em 1em;
}

.is-show{
	left: auto;
	top: 100%;
}
</style>
</head>
<body>
  <h1>Accessible Drop Down Menu</h1>
	<p>try navigating the dropdown menu using tab key :)</p>
	<nav role="navigation">
		<ul class="access-menu">
			<li>
				<a href="#">link 1</a>
				<ul class="access-submenu">
					<li><a href="#">sub link 1</a></li>
					<li><a href="#">sub link 1</a></li>
					<li><a href="#">sub link 1</a></li>
					<li><a href="#">sub link 1</a></li>
				</ul>
			</li>
			<li>
				<a href="#">link 2</a>
				<ul class="access-submenu">
					<li><a href="#">sub link 2</a></li>
					<li><a href="#">sub link 2</a></li>
					<li><a href="#">sub link 2</a></li>
					<li><a href="#">sub link 2</a></li>
				</ul>
			</li>
			<li>
				<a href="#">link 3</a>
				<ul class="access-submenu">
					<li><a href="#">sub link 3</a></li>
					<li><a href="#">sub link 3</a></li>
					<li><a href="#">sub link 3</a></li>
					<li><a href="#">sub link 3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">link 4</a>
				<ul class="access-submenu">
					<li><a href="#">sub link 4</a></li>
					<li><a href="#">sub link 4</a></li>
					<li><a href="#">sub link 4</a></li>
					<li><a href="#">sub link 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">link 5</a>
				<ul class="access-submenu">
					<li><a href="#">sub link 5</a></li>
					<li><a href="#">sub link 5</a></li>
					<li><a href="#">sub link 5</a></li>
					<li><a href="#">sub link 5</a></li>
				</ul>
			</li>
		</ul>
	</nav>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var App = {

  accessibleMenu: function () {
    $menu = $('.access-menu');
    $menuItem = $menu.find('> li > a');

    $subMenu = $('.access-submenu');
    $subMenuItem = $subMenu.find('> li > a');
    $submenuLastItem = $subMenu.find('> li:last-child > a');

    $menuItem.bind({
      focus: function () {
        $subMenu.removeClass('is-show');
        if ($(this).next($subMenu)) {
          $(this).next($subMenu).addClass('is-show');
        }
      },

      blur: function () {
        $subMenu.removeClass('is-show');
      } });


    $subMenuItem.bind({
      focus: function () {
        $(this).parent().parent().addClass('is-show');
      } });


    $submenuLastItem.bind({
      blur: function () {
        $subMenu.removeClass('is-show');
      } });

  },

  cancelAccessibleMenu: function () {
    $(document).click(function () {
      if ($subMenu.hasClass('is-show')) {
        $subMenu.removeClass('is-show');
      }
    });
  } };
$(function () {
  App.accessibleMenu();
  App.cancelAccessibleMenu();
});
    </script>
</body>
</html>

3. By Michael Lee

Made by Michael Lee. Admin Dropdown Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*=entypo-]:before {
  font-family: "entypo", sans-serif;
  margin: 0 8px 0 0;
  width: 24px;
  text-align: center;
  display: inline-block;
  border: none;
}

.Dropdown-nav li .NavLink, .Dropdown-profile {
  background: #fff;
  display: block;
  height: 24px;
  padding: 8px;
}

body {
  background: #fff;
  font-family: "Lato";
  font-weight: 400;
}

a {
  text-decoration: none;
  color: #49bcbe;
}

.Dropdown {
  border: 2px solid #ddd;
  cursor: pointer;
  overflow: hidden;
  width: 200px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.Dropdown-profile {
  position: relative;
}
.Dropdown-profile .Photo {
  background: #ddd;
  display: inline-block;
  vertical-align: middle;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  height: 24px;
  width: 24px;
}
.Dropdown-profile .Name {
  display: inline-block;
  line-height: 24px;
  padding: 0 0 0 5px;
  vertical-align: middle;
  width: 120px;
}
.Dropdown-nav {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: height 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  transition: height 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.Dropdown-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.Dropdown-nav li {
  position: relative;
}
.Dropdown-nav li a {
  color: #ccc;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.Dropdown-nav li a:hover {
  color: #49bcbe;
}
.Dropdown-nav li .OptionLink {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  font-size: 18px;
  margin: auto;
  z-index: 5;
}
.Dropdown-nav li .NavLink {
  line-height: 24px;
}
.Dropdown.is-expanded nav {
  height: 202px;
}

.Dropdown-group {
  border-top: 1px solid #ddd;
}

.Dropdown.is-expanded .MenuIcon-line:nth-child(1) {
  top: 50%;
}
.Dropdown.is-expanded .MenuIcon-line:nth-child(3) {
  top: 50%;
}

.MenuIcon {
  bottom: 0;
  top: 0;
  margin: auto;
  position: absolute;
  right: 14px;
  height: 10px;
  width: 12px;
}
.MenuIcon-line {
  background: #49bcbe;
  display: inline-block;
  height: 2px;
  margin: auto;
  position: absolute;
  width: 100%;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.MenuIcon-line:nth-child(1) {
  top: 0;
}
.MenuIcon-line:nth-child(2) {
  top: 50%;
}
.MenuIcon-line:nth-child(3) {
  top: 100%;
}
</style>
</head>
<body translate="no" v class="Dropdown">
  <div class="Dropdown-profile">
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/33381/profile/profile-80.jpg?1" class="Photo" />
    <span class="Name">Michael Lee</span>
    <span class="MenuIcon">
      <span class="MenuIcon-line"></span>
      <span class="MenuIcon-line"></span>
      <span class="MenuIcon-line"></span>
    </span>
  </div>
  <nav class="Dropdown-nav">
    <ul class="Dropdown-group">
      <li>
        <a href="#" class="entypo-newspaper NavLink">Posts</a>
        <a href="#" class="entypo-plus OptionLink"></a>
      </li>
      <li><a href="#" class="entypo-archive NavLink">Categories</a>
      <a href="#" class="entypo-plus OptionLink"></a></li>
      <li><a href="#" class="entypo-docs NavLink">Pages</a><a href="#" class="entypo-plus OptionLink"></a></li>
      <li><a href="#" class="entypo-users NavLink">Users</a><a href="#" class="entypo-plus OptionLink"></a></li>
    </ul>
    <ul class="Dropdown-group">
      <li>
        <a href="#" class="entypo-logout NavLink">Logout</a>
      </li>
    </ul>
  </nav>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(".Dropdown").on("click", function () {
  $(this).toggleClass('is-expanded');
});
    </script>
</body>
</html>

4. By Dany Santos

Made by Dany Santos. JavaScript dropdown menu with ripple animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600'>
  
<style>
* {
  margin: 0px auto;
  padding: 0px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;

}

.cont_principal {
  position: absolute;
  width: 100%;
  height: 100%;  
 background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(224,232,245,1) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(224,232,245,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(224,232,245,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e8f5',GradientType=0 );

}

.cont_menu {
  position: absolute;
  width: 320px;
  left: 50%;
  margin-left: -160px;
  margin-top: 20%;
}

.cont_titulo_menu{
  position: relative;
  float: left;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background-color: #4F7DF5;
  box-shadow: 0px 7px 30px -12px rgba(0,0,0,0.5);
  margin-top: 20px;
  border-radius:3px ;
   -webkit-user-select: none;  
  -moz-user-select: none; 
  -ms-user-select: none;         user-select: none;           }


.cont_icon_menu{
  position: relative;
  float: right;
  margin-right: 20px;
  top:14px;

}
.cont_icon_menu > img {
width: 32px;
z-index: 2;
position: relative;
}
.cont_titulo {
position: relative;
float: left;
margin-top: 20px;
margin-left: 20px;
color: #fff;
}

.cont_circle_1 {
  position: absolute;
top:-16px;
  left: -16px;
  width: 64px;
  height: 64px;
background-color: #fff;
opacity: 0.3;
  z-index: 0;
border-radius:50% ;
animation: animation_circle_1 3s infinite;
    animation-direction: alternate;
transform: scale(0);
}
.cont_circle_2 {
  position: absolute;
top:-46px;
  left: -46px;
  width: 128px;
  height: 128px;
background-color: #fff;
opacity: 0.2;
  z-index: 0;
border-radius:50% ;
animation: animation_circle_1 3s infinite;
    animation-direction: alternate;
animation-delay: 0.5s;
transform: scale(0);
}
.cont_circle_3 {
  position: absolute;
top:-80px;
  left: -80px;
  width: 192px;
  height: 192px;
background-color: #fff;
opacity: 0.1;
  z-index: 0;
border-radius:50% ;
animation: animation_circle_1 3s infinite;
    animation-direction: alternate;
animation-delay: 1s;
transform: scale(0);
}
.cont_circle_4 {
  position: absolute;
top:-115px;
  left: -116px;
  width: 256px;
  height: 256px;
background-color: #fff;
opacity: 0.1;
  z-index: 0;
border-radius:50% ;
animation: animation_circle_1 3s infinite;
    animation-direction: alternate;
animation-delay: 1.5s;
transform: scale(0);
}

@-webkit-keyframes animation_circle_1 {
  from { transform: scale(0);   }
  to { transform: scale(1); }
}
@-o-keyframes animation_circle_1 {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@-moz-keyframes animation_circle_1 {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@keyframes animation_circle_1 {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.cont_drobpdown_menu {
  position: relative;
  float: left;
  width: 100%;
   background-color: #fff;
  box-shadow: 0px 2px 20px -2px rgba(0,0,0,0.3);
margin-top: 10px;
  border-radius:3px ;
opacity: 1;
  transition: all 0.5s;
} 
.cont_drobpdown_menu ul > li {

  list-style: none;
  margin-left: -3px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-left: 5px solid #eee ;
  width: 100%;
  display: block;
transition: all 0.5s;
}
.cont_drobpdown_menu ul > li:hover { 
  border-left: 5px solid #6992FE ;
}
.cont_drobpdown_menu ul > li:hover >a {  
color: #6992FE;
}

.cont_drobpdown_menu ul > li:nth-child(2) {
  border: none;
}
.cont_drobpdown_menu ul > li > a {
  position: relative;
  display: block;
  width: 90%;
  padding-top:10px;
  padding-bottom:10px;
  text-decoration: none;
  color: #C4D0DE;
transition: all 0.5s;
}
.cont_drobpdown_menu ul > li > hr  {
width: 75%;
height: 0px;
color: #123455;
background-color: #123455;
border:1px solid #eee;
}


.cont_icon_trg {
      position: relative;
    float: left;
    margin-bottom: -30px;
    z-index: 1;
  left: 10px;
  transform: translate(0px,10px);
transition: all 0.5s;
}


.disable   {
  transition: all 0.5s;
  opacity: 0;  
  transform: translate(0px,10px);

}

.disable > ul > li {
  transform: translate(0px,10px);
  opacity: 0;
}

.active   {
   opacity: 1;  
  transform: translate(0px,0px);
}

.active > ul > li {
transition-delay: 0.5s;
  transform: translate(0px,0px);
  opacity: 1;
}
</style>
</head>
<body>
  <div class="cont_principal">
<div class="cont_menu">
  <div class="cont_titulo_menu" onclick="menu()">
<div class="cont_titulo">
    <h4>ACCOUNT SETTINGS</h4>
    </div>
    <div class="cont_icon_menu">
   <img src="http://danysantos.hol.es/img/planet.png" alt="" />
<div class="cont_circle_1"></div>
<div class="cont_circle_2"></div>
<div class="cont_circle_3"></div>
<div class="cont_circle_4"></div>
    </div>
  </div>
<div class="cont_icon_trg disable">
<svg width="46px" height="38px" viewBox="0 0 46 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  >
    <defs>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
            <feOffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0813575634 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <polygon id="Triangle-1" fill="#FFFFFF" filter="url(#filter-1)" sketch:type="MSShapeGroup" points="23 7 39 24 7 24 "></polygon>
    </g>
</svg></div>
<div class="cont_drobpdown_menu disable" >

  <ul>
  <li><a href="#">Profile Information</a></li>
 <li><hr /></li>
  <li><a href="#">Change Password</a></li>
</ul>
  
  </div> 
  </div> 
</div>
      <script>
var c = 0;
function menu() {
  if (c % 2 == 0) {
    document.querySelector('.cont_drobpdown_menu').className = "cont_drobpdown_menu active";
    document.querySelector('.cont_icon_trg').className = "cont_icon_trg active";
    c++;
  } else {
    document.querySelector('.cont_drobpdown_menu').className = "cont_drobpdown_menu disable";
    document.querySelector('.cont_icon_trg').className = "cont_icon_trg disable";
    c++;
  }
}
    </script>
</body>
</html>

5. By LeFourbeFromage

Made by LeFourbeFromage. Simple dropdown menu with icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-zrnmn8R8KkWl12rAZFt4yKjxplaDaT7/EUkKm7AovijfrQItFWR7O/JJn4DAa/gx" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
<style>
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
  background: #f6f8fe;
}

.container {
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  display: flex;
}

.dropdown-wrapper {
  position: relative;
}
.dropdown-wrapper button {
  outline: none;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  color: #1a3066;
  font-weight: bold;
  background: transparent;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 10px;
}
.dropdown-wrapper button:hover:not(.active), .dropdown-wrapper button:active:not(.active) {
  background-color: #ebeffa;
}
.dropdown-wrapper button.active {
  color: #4879ea;
}
.dropdown-wrapper .dropdown-menu {
  background: white;
  padding: 20px;
  margin-top: 20px;
  position: absolute;
  border-radius: 10px;
  display: flex;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.12);
}
.dropdown-wrapper .dropdown-menu:before {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent white transparent;
  z-index: 6;
}
.dropdown-wrapper .dropdown-menu:after {
  position: absolute;
  top: 3px;
  transform: translateY(-100%);
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent;
  filter: blur(3px);
  z-index: -1;
}
.dropdown-wrapper .dropdown-menu.left {
  left: 0;
}
.dropdown-wrapper .dropdown-menu.left:before, .dropdown-wrapper .dropdown-menu.left:after {
  left: 40px;
}
.dropdown-wrapper .dropdown-menu.medium {
  left: 50%;
  transform: translateX(-50%);
}
.dropdown-wrapper .dropdown-menu.medium:before {
  left: 50%;
  transform: translate(-50%, -100%);
}
.dropdown-wrapper .dropdown-menu.medium:after {
  content: none;
}
.dropdown-wrapper .dropdown-menu.right {
  right: 0;
}
.dropdown-wrapper .dropdown-menu.right:before, .dropdown-wrapper .dropdown-menu.right:after {
  right: 50px;
}
.dropdown-wrapper .dropdown-menu ul {
  z-index: 3;
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
}
.dropdown-wrapper .dropdown-menu ul li a {
  text-decoration: none;
  color: black;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.dropdown-wrapper .dropdown-menu ul li a:hover {
  background: #f6f8fe;
  border-radius: 15px;
}
.dropdown-wrapper .dropdown-menu ul li a span {
  display: flex;
  align-items: center;
  padding-left: 30px;
  white-space: nowrap;
}
.dropdown-wrapper .dropdown-menu ul li a span.headline {
  position: relative;
  font-size: 18px;
  color: #1a3066;
  font-weight: bold;
  margin-bottom: 10px;
}
.dropdown-wrapper .dropdown-menu ul li a span.headline small {
  background: #4de6a6;
  color: #138656;
  padding: 5px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  margin-left: 5px;
}
.dropdown-wrapper .dropdown-menu ul li a span.headline i {
  position: absolute;
  left: 0;
  color: #4879ea;
  transform: scale(1.2);
}
.dropdown-wrapper .dropdown-menu ul li a span.subtitle {
  color: #abafba;
  font-size: 15px;
}
</style>
</head>
<body>
  <div class="container">
  <div class="dropdown-wrapper">
    <button type="button" class="active" data-dropdown-toggle="dropdown-list">Features</button>
    <div id="dropdown-list" class="dropdown-menu left" >
      <ul class="two-column">
        <li>
          <a href="#">
            <span class="headline"><i class="far fa-cog"></i> Settings</span>
            <span class="subtitle">Set up your profile</span>
          </a>        
        </li>

        <li>
          <a href="#">
            <span class="headline"><i class="far fa-user-headset"></i> Need help ?</span>
            <span class="subtitle">We are here to help you !</span>
          </a>        
        </li>
      </ul>

      <ul class="two-column">
        <li>
          <a href="#">
            <span class="headline"><i class="far fa-shield"></i>Private CDN <small>new</small></span>
            <span class="subtitle">Get your private cdn</span>
          </a>        
        </li>

        <li>
          <a href="#">
            <span class="headline"><i class="far fa-user-headset"></i> Need help ?</span>
            <span class="subtitle">We are here to help you !</span>
          </a>        
        </li>
      </ul>
    </div>
  </div>

  <div class="dropdown-wrapper">
    <button type="button" data-dropdown-toggle="dropdown-premium">Premium</button>
    <div id="dropdown-premium" class="dropdown-menu medium" style="display:none;">
      <ul class="two-column">
        <li>
          <a href="#">
            <span class="headline"><i class="far fa-cog"></i> Settings</span>
            <span class="subtitle">Set up your profile</span>
          </a>        
        </li>

        <li>
          <a href="#">
            <span class="headline"><i class="far fa-user-headset"></i> Need help ?</span>
            <span class="subtitle">We are here to help you !</span>
          </a>        
        </li>
      </ul>

      <ul class="two-column">
        <li>
          <a href="#">
            <span class="headline"><i class="far fa-shield"></i>Private CDN <small>new</small></span>
            <span class="subtitle">Get your private cdn</span>
          </a>        
        </li>

        <li>
          <a href="#">
            <span class="headline"><i class="far fa-user-headset"></i> Need help ?</span>
            <span class="subtitle">We are here to help you !</span>
          </a>        
        </li>
      </ul>
    </div>
  </div>

  <div class="dropdown-wrapper">
    <button type="button" data-dropdown-toggle="dropdown-us">The Company</button>
    <div id="dropdown-us" class="dropdown-menu right" style="display:none;">
      <ul class="two-column">
        <li>
          <a href="#">
            <span class="headline"><i class="far fa-building"></i> Our Office</span>
            <span class="subtitle">Discover our office</span>
          </a>        
        </li>
      </ul>

      <ul class="two-column">  
        <li>
          <a href="#">
            <span class="headline"><i class="far fa-scroll"></i>Jobs</span>
            <span class="subtitle">Send us your profile</span>
          </a>        
        </li>
      </ul>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
var $body = $('body');

$body.on('click', '[data-dropdown-toggle]', event => {
  event.preventDefault();
  var $button = $(event.target),
  $data = $(event.target).data('dropdownToggle'),
  $dropdown = '#' + $data;

  $('.dropdown-menu:not(' + $dropdown + ')').hide();
  $('button:not(' + $data + ')').removeClass('active');
  $($dropdown).toggle();
  $($button).toggleClass("active");

});
    </script>
</body>
</html>

6. By Rafa R

Made by Rafa R. Responsive Animated Multilevel Dropdown Menu with Hamburger. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  text-decoration:none;
  color:#f2f2f2;
}
.main-menu {
  display:block;
  position:relative;
  background:#0e0e0e;
}
.container-menu {
  width:80%;
  margin:0 auto;
}
.main-menu:before,.main-menu:after{
  display: table;
  line-height: 0;
  content: "";
}
.core-menu {
  text-align:center;
  font:normal normal normal 1em/1 Roboto, sans-serif;
  overflow:hidden;
}
.core-menu li {
  list-style:none;
  display:inline-block;
  cursor:pointer;
}
.core-menu li a {
  display:inline-block;
  padding:1em;
}
.core-menu li a:hover {
  background:#38a201;
}
li span.toggle {
  padding-left:1em;
}
.toggle:before {
  content:"\f107";
  font:normal normal normal 16px/1 FontAwesome;
}
.dropdown {
  position:absolute;
  width:230px;
  background:#1a1a1a;
  text-align:left;
  display:none;
}
.dropdown li {
  display:block;
  }
.dropdown li a {
  display:block;
}
.dropdown2 {
  position:absolute;
  width:230px;
  background:#2d2d2d;
  text-align:left;
  display:none;
  right:-100%;
  top:0;
}
.dropdown2 li {
  display:block;
  }
.dropdown2 li a {
  display:block;
}
li span.toggle2 {
  position:absolute;
  right:0;
  margin-right:20px;
}
.toggle2:before {
  content:"\f105";
  font:normal normal normal 16px/1 FontAwesome;
}
.hamburger-menu {
  padding:1em;
  display:none;
  font:normal normal normal 16px/1 Roboto;
  text-transform:uppercase;
}

@media (max-width:720px) {
  .main-menu {
    height:50px;
  }
  .container-menu {
    width:100%;
  }
  .navigation {
    float:left;
    display:block;
    width:100%;
  }
  .core-menu {
    float:right;
    width:100%;
    background:#1a1a1a;
    margin:auto;
    display:none;
  }
  
  .core-menu li {
    width:100%;
    display:block;
  }
  .core-menu li a{
    display:block;
    margin:auto;
  }
  .hamburger-menu {
    display:block;
    text-align:center;
    padding-right:60px;
    float:none;
    width:100%;
  }
  .burger-1, .burger-2, .burger-3 {
  display:block;
  position:absolute;
  width:20px;
  height:3px;
  border-radius:30px;
  right:0;
  margin-right:25px;
  background:#fff;
    -webkit-transition:.2s ease;
    -ms-transition:.2s ease;
    -moz-transition:.2s ease;
    -o-transition:.2s ease;
  transition:.2s ease; 
  }
  .burger-1 {
  top:15px;
  }
  .burger-2 {
  top:23px;
  }
  .burger-3 {
  top:31px;
  }
  .burger-1.open, .burger-2.open, .burger-3.open {
  -webkit-transition:.2s ease;
  -ms-transition:.2s ease;
  -moz-transition:.2s ease;
  -o-transition:.2s ease;
    transition:.2s ease;
    transform-origin:50% 50%;
  }
  .burger-1.open {
    top:25px;
    width:23px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg); 
    -ms-transform:rotate(45deg); 
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg); 
  }
  .burger-2.open {
    opacity:0;
  }
  .burger-3.open {
    top:25px;
    width:23px;
    transform:rotate(-45deg);
  }
  .dropdown {
    width:100%;
    background:#0e0e0e;
    text-align:center;
    position:relative;
  }
  .dropdown2 {
    right:0;
    top:0;
    width:100%;
    position:relative;
    padding:0 20px;
}
</style>
</head>
<body>
  <div id='main-menu' class='main-menu'>
  <div class='container-menu'>
    <nav class='navigation'>
      <span class='hamburger-menu'>Navigate
        <span class='burger-1'></span>
        <span class='burger-2'></span>
        <span class='burger-3'></span>
      </span>
      <ul class='core-menu'>
        <li><a href='#'>Product<span class='toggle'></span></a>
          <ul class='dropdown'>
            <li><a href='#'>Windows 10<span class='toggle2'></span></a></a>
              <ul class='dropdown2'>
                <li><a href='#'>Windows 10 Pro</a></li>
                <li><a href='#'>Windows 10 Home</a></li>
                <li><a href='#'>Profesional</a></li>
              </ul>
            </li>
            <li><a href='#'>Windows Phone</a></li>
            <li><a href='#'>Laptop</a></li>
          </ul>
        </li>
        <li><a href='#'>Featured<span class='toggle'></a>
        <ul class='dropdown'>
            <li><a href='#'>Cortana</a></li>
            <li><a href='#'>Xboct</a></li>
            <li><a href='#'>Microsoft Edge</a></li>
          </ul>
        </li>
        <li><a href='#'>Devices</a></li>
        <li><a href='#'>Help</a></li>
      </ul>
    </nav>
  </div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  //the trigger on hover when cursor directed to this class
  $(".core-menu li").hover(
  function () {
    //i used the parent ul to show submenu
    $(this).children('ul').slideDown('fast');
  },
  //when the cursor away 
  function () {
    $('ul', this).slideUp('fast');
  });
  //this feature only show on 600px device width
  $(".hamburger-menu").click(function () {
    $(".burger-1, .burger-2, .burger-3").toggleClass("open");
    $(".core-menu").slideToggle("fast");
  });
});
    </script>
</body>
</html>

7. By Boomer

Made by Boomer. Dropdown Menu with Staggered Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
  
<style>
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #F3F4F8;
}

ul.nav {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  max-width: 70%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: #907dda;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
ul.nav > li {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  height: 60px;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  line-height: 60px;
  letter-spacing: 1px;
  color: #e7e6f1;
  cursor: pointer;
}
ul.nav > li:hover {
  background: rgba(0, 0, 0, 0.1);
}
ul.nav > li:hover ul.dropdown {
  visibility: visible;
  transform: translate(0, 0);
  opacity: 1;
  z-index: 0;
}
ul.nav > li:hover ul.dropdown > li {
  -webkit-animation-name: slideInLeft;
          animation-name: slideInLeft;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
ul.nav > li:first-child {
  border-top-left-radius: 6px;
}
ul.nav > li:last-child {
  border-top-right-radius: 6px;
}

ul.dropdown {
  visibility: hidden;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  margin: 0;
  padding: 5px 0 30px;
  list-style: none;
  color: #333;
  background: #e5e4ea;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.15), 0px 4px 14px -1px rgba(0, 0, 0, 0.1);
  transform: translate(0, -60px);
  transition: transform 0.2s ease-out, opacity 0.2s, z-index 0s 0.2s;
  opacity: 0;
  z-index: -1;
}
ul.dropdown > li {
  font-size: 14px;
  cursor: pointer;
}
ul.dropdown > li:hover {
  background: rgba(0, 0, 0, 0.06);
}

@-webkit-keyframes slideInLeft {
  from {
    transform: translate(-25%, 0);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translate(-25%, 0);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
</style>
</head>
<body>
  <nav class="navbar">
	<ul class="nav">
		<li>
			Home
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
			</ul>
		</li>
		<li>
			About
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
			</ul>			
		</li>
		<li>
			Pricing
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
			</ul>			
		</li>
		<li>
			Docs
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
			</ul>			
		</li>
		<li>
			Contact
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
			</ul>					
		</li>
	</ul>
</nav>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://codepen.io/CodeBoomer/pen/qaOWJE.js'></script>
      <script>
$(document).ready(function () {

  // Loop through each nav item
  $('nav.navbar').children('ul.nav').children('li').each(function (indexCount) {

    // loop through each dropdown, count children and apply a animation delay based on their index value
    $(this).children('ul.dropdown').children('li').each(function (index) {

      // Turn the index value into a reasonable animation delay
      var delay = 0.1 + index * 0.03;

      // Apply the animation delay
      $(this).css("animation-delay", delay + "s");
    });
  });
});
    </script>
</body>
</html>

8. By Metty

Made by Metty. A Simple JavaScript dropdown menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
  background: url("http://ghostlab.vanamco.com/img/hero_img.jpg");
  background-size: cover;
}

.container {
  width: 150px;
  margin: 10px auto;
  padding: 0;
}

.container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}


.dropdown a {
  text-decoration: none;
}

.dropdown [data-toggle="dropdown"] {
display: block;
position: relative;
border: solid 1px transparent;
font-family: 'Open Sans', sans-serif;
padding: 10px 10px;
margin: 0;
outline: 0;
font-size: 1em;
text-decoration: none;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.dropdown [data-toggle="dropdown"] {
border-color: #d3d3d3;
background: #f8f8f8;
color: #333;
}

.dropdown [data-toggle="dropdown"]:hover {
  background: #2c89c6;
}

.dropdown .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.6em;
  color: #333;
  top: 14px;
  right: 10px;
}

.dropdown .icon-arrow.open {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  transition: transform 0.6s;
}

.dropdown .icon-arrow.close {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  transition: transform 0.6s;
}

.dropdown .icon-arrow:before {
  content: '\25BC';
}

.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown .dropdown-menu li {
  padding: 0;
}

.dropdown .dropdown-menu li a {
  display: block;
  color: #6e6e6e;
  background: #eeeeee;
  -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
}

.dropdown .dropdown-menu li a:hover {
  background: #f6f6f6;
}

.dropdown .show, .dropdown .hide {
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

.dropdown .show {
  display: block;
  max-height: 9999px;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  -moz-transition: max-height 1s ease-in-out;
  -o-transition: max-height 1s ease-in-out;
  transition: max-height 1s ease-in-out;
}

.dropdown .hide {
  max-height: 0;
  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform: scaleY(0);
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
}

#loading {
  color: #000;
  position: relative;
  font-size: 18px;
  text-align: center;
  font-family:monospace;
  margin: 0.1em auto;
  padding. 0;
  text-transform: uppercase
}
</style>
</head>
<body>
  <h1 id="loading">Loading...</h1>
<div class="container">
<ul>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
</ul>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// Dropdown Menu
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown, 0);
dropdownArray.forEach(function (el) {
  var button = el.querySelector('a[data-toggle="dropdown"]'),
  menu = el.querySelector('.dropdown-menu'),
  arrow = button.querySelector('i.icon-arrow');

  button.onclick = function (event) {
    if (!menu.hasClass('show')) {
      menu.classList.add('show');
      menu.classList.remove('hide');
      arrow.classList.add('open');
      arrow.classList.remove('close');
      event.preventDefault();
    } else
    {
      menu.classList.remove('show');
      menu.classList.add('hide');
      arrow.classList.remove('open');
      arrow.classList.add('close');
      event.preventDefault();
    }
  };
});

Element.prototype.hasClass = function (className) {
  return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
    </script>
</body>
</html>

9. By Gabriel Crispino

Made by Gabriel Crispino. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
body{
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.hide {
    max-height: 0 !important;
}

.dropdown{
	border: 0.1em solid black;
	width: 10em;
	margin-bottom: 1em;
}

.dropdown .title{
	margin: .3em .3em .3em .3em;	
	width: 100%;
}

.dropdown .title .fa-angle-right{
	float: right;
	margin-right: .7em;
	transition: transform .3s;
}

.dropdown .menu{
	transition: max-height .5s ease-out;
	max-height: 20em;
	overflow: hidden;
}

.dropdown .menu .option{
	margin: .3em .3em .3em .3em;
	margin-top: 0.3em;
}

.dropdown .menu .option:hover{
	background: rgba(0,0,0,0.2);
}

.pointerCursor:hover{
	cursor: pointer;
}

.rotate-90{
	transform: rotate(90deg);
}
</style>
</head>
<body>
  <div class='dropdown'>
		<div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div>
		
		<div class='menu pointerCursor hide'>
			<div class='option' id='option1'>Option 1</div>
			<div class='option' id='option2'>Option 2</div>
			<div class='option' id='option3'>Option 3</div>
			<div class='option' id='option4'>Option 4</div>
		</div>

	</div>

	<span id='result'>The result is: </span>
      <script>
function toggleClass(elem, className) {
  if (elem.className.indexOf(className) !== -1) {
    elem.className = elem.className.replace(className, '');
  } else
  {
    elem.className = elem.className.replace(/\s+/g, ' ') + ' ' + className;
  }

  return elem;
}

function toggleDisplay(elem) {
  const curDisplayStyle = elem.style.display;

  if (curDisplayStyle === 'none' || curDisplayStyle === '') {
    elem.style.display = 'block';
  } else
  {
    elem.style.display = 'none';
  }

}

function toggleMenuDisplay(e) {
  const dropdown = e.currentTarget.parentNode;
  const menu = dropdown.querySelector('.menu');
  const icon = dropdown.querySelector('.fa-angle-right');

  toggleClass(menu, 'hide');
  toggleClass(icon, 'rotate-90');
}

function handleOptionSelected(e) {
  toggleClass(e.target.parentNode, 'hide');

  const id = e.target.id;
  const newValue = e.target.textContent + ' ';
  const titleElem = document.querySelector('.dropdown .title');
  const icon = document.querySelector('.dropdown .title .fa');


  titleElem.textContent = newValue;
  titleElem.appendChild(icon);

  //trigger custom event
  document.querySelector('.dropdown .title').dispatchEvent(new Event('change'));
  //setTimeout is used so transition is properly shown
  setTimeout(() => toggleClass(icon, 'rotate-90', 0));
}

function handleTitleChange(e) {
  const result = document.getElementById('result');

  result.innerHTML = 'The result is: ' + e.target.textContent;
}

//get elements
const dropdownTitle = document.querySelector('.dropdown .title');
const dropdownOptions = document.querySelectorAll('.dropdown .option');

//bind listeners to these elements
dropdownTitle.addEventListener('click', toggleMenuDisplay);

dropdownOptions.forEach(option => option.addEventListener('click', handleOptionSelected));

document.querySelector('.dropdown .title').addEventListener('change', handleTitleChange);
    </script>
</body>
</html>