devluis · December 5, 2013 23:10
diff --git a/hover-dropdown-menu b/hover-dropdown-menu
 <!doctype html>
 <html lang="en">
 <head>
 	<style type="text/css">
 		ul {
 			margin:0;
 			padding:0;
 			list-style-type:none;
 			min-width:200px;
 		}
 
 		ul#navigation {
 			float:left;
 		}
 
 		ul#navigation li {
 			float:left;
 			border:1px black solid;
 			min-width:200px;
 		}
 
 		ul.sub_navigation {
 			position:absolute;
 			display:none;
 		}
 
 		ul.sub_navigation li {
 			clear:both;
 		}
 
 		a,
 		a:active,
 		a:visited {
 			display:block;
 			padding:10px;
 		}
 	</style>
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 	<script type="text/javascript">
 	        // Wait for the page and all the DOM to be fully loaded
 		$('body').ready(function() {
 
 	                // Add the 'hover' event listener to our drop down class
 			$('.dropdown').hover(function() {
 	                        // When the event is triggered, grab the current element 'this' and
 	                        // find it's children '.sub_navigation' and display/hide them
 				$(this).find('.sub_navigation').slideToggle(); 
 			});
 		});
 	</script>
 	<title>jQuery Drop Down Menu Tutorial - Demo</title>
 </head>
 <body>
 <ul id="navigation">
 	<li class="dropdown"><a href="#">Dropdown</a>
 		<ul class="sub_navigation">
 			<li><a href="#">Sub Navigation 1</a></li>
 			<li><a href="#">Sub Navigation 2</a></li>
 			<li><a href="#">Sub Navigation 3</a></li>
 		</ul>
 	</li>
 	<li class="dropdown"><a href="#">Dropdown 2</a>
 		<ul class="sub_navigation">
 			<li><a href="#">Sub Navigation 1</a></li>
 			<li><a href="#">Sub Navigation 2</a></li>
 			<li><a href="#">Sub Navigation 3</a></li>
 		</ul>
 	</li>
 </ul>
 </body>
 </html>