Dropdown Navigation Menus

A refined example regarding the code used to make a dropdown navigation menu.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700" rel="stylesheet"> 

<h3>Ordinary Dropdown Menu</h3>

<nav id="nav1">
  <ul>
    <li><a href="#">List item 1</a></li>
    <li><a href="#">Dropdown Menu 1</a>
      <ul>
        <li><a href="#">Dropdown Menu Item 1</a></li>
        <li><a href="#">Dropdown Menu Item 2</a></li>
        <li><a href="#">Dropdown Menu Item 3</a></li>
        <li><a href="#">Dropdown Menu Item 4</a></li>
      </ul>
    </li>
    <li><a href="#">List item 2</a></li>
    <li><a href="#">List item 3</a></li>
    <li><a href="#">List item 4</a></li>
    <li><a href="#">Dropdown Menu 2</a>
      <ul>
        <li><a href="#">Dropdown Menu Item 1</a></li>
        <li><a href="#">Dropdown Menu Item 2</a></li>
        <li><a href="#">Dropdown Menu Item 3</a></li>
        <li><a href="#">Dropdown Menu Item 4</a></li>
      </ul>
    </li>
  </ul>
</nav>

<h3>jQuery Dropdown Menu</h3>
<p>You need to also inlude &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt; within your HTML's head tag</p>

<nav id="nav2">
  <ul>
    <li><a href="#">List item 1</a></li>
    <li><a href="javascript:void(0)">Dropdown Menu 1</a>
      <ul>
        <li><a href="#">Dropdown Menu Item 1</a></li>
        <li><a href="#">Dropdown Menu Item 2</a></li>
        <li><a href="#">Dropdown Menu Item 3</a></li>
        <li><a href="#">Dropdown Menu Item 4</a></li>
      </ul>
    </li>
    <li><a href="#">List item 2</a></li>
    <li><a href="#">List item 3</a></li>
    <li><a href="#">List item 4</a></li>
    <li><a href="javascript:void(0)">Dropdown Menu 2</a>
      <ul>
        <li><a href="#">Dropdown Menu Item 1</a></li>
        <li><a href="#">Dropdown Menu Item 2</a></li>
        <li><a href="#">Dropdown Menu Item 3</a></li>
        <li><a href="#">Dropdown Menu Item 4</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

*,html,body{ padding: 0; margin: 0; }
body{
  background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-154406.jpg');
  color: #FFF;
  font-family: "Miriam Libre";
  padding: 50px;
  overflow-y: scroll;
}
h3{ font-size: 32px; margin: 0 0 20px 0; }
p{ margin: 0 0 15px 0; }

#blah{ transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; }

/* Navigation 1 */
#nav1{ margin: 0 0 250px 0; }
#nav1{ background-color: #FFF; }
#nav1 ul{ list-style-type: none; }
#nav1 ul li{ display: inline-block; }
#nav1 ul li a{ display: block; padding: 15px; color: #333; text-decoration: none; }
#nav1 ul li:hover{ background-color: #279BF6; }
#nav1 ul li:hover a{ color: #FFF; }

#nav1 ul li:hover ul{ display: block; }
#nav1 ul ul{ position: absolute; background-color: #279BF6; display: none; padding: 3px 0 3px 0; }
#nav1 ul ul li{ display: block; }
#nav1 ul ul li a{ color: #FFF!important; }
#nav1 ul ul li a:hover{ background-color: #FFF; color: #333!important; }

/* Navigation 2 */
#nav2{ margin: 0 0 200px 0; }
#nav2{ background-color: #FFF; }
#nav2 ul{ list-style-type: none; }
#nav2 ul li{ display: inline-block; }
#nav2 ul li a{ display: block; padding: 15px; color: #333; text-decoration: none; }
#nav2 ul li:hover{ background-color: #279BF6; }
#nav2 ul li:hover a{ color: #FFF; }

#nav2 ul ul{ position: absolute; background-color: #279BF6; padding: 3px 0 3px 0; }
#nav2 ul ul li{ display: block; }
#nav2 ul ul li a{ color: #FFF!important; }
#nav2 ul ul li a:hover{ background-color: #FFF; color: #333!important; }

JavaScript

$(document).ready(function(){
	$("#nav2 ul ul").hide();
  $("#nav2 ul li").click(function(){
  	$(this).children("ul").toggle();
  });
});