After following a tutorial online on creating a responsive menu, I successfully implemented it and now I want to take it one step further by adding a dropdown menu.
Check out the complete code below or view it on jsfiddle
<!doctype html>
<html>
<head>
...
</style>
</head>
<body>
<div class="wrapper">
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">How-to</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">Tools</a></li>
</ul>
<a href="#" id="pull">Menu</a> </nav>
</div>
<script>
...
</script>
</body>
</html>
In an attempt to add a dropdown menu, I included an additional ul inside an li:
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a>
<ul >
<li><a href="#">Submenu</a>
</ul>
</li>
<li><a href="#">How-to</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">Tools</a></li>
</ul>
<a href="#" id="pull">Menu</a> </nav>
I then adjusted the CSS as follows:
nav ul li ul { display:none; }
nav ul li:hover ul { display:block; }
This was my attempt at incorporating a dropdown menu feature.