jeremyboggs · April 30, 2013 00:12
diff --git a/dropdown.html b/dropdown.html

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Dropdowns</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script>

 $(document).ready(function() {
  $('header nav li').hover(
 	        function () {
        	    //show its submenu
            		$('ul', this).stop().slideDown(100);
        	}, 
        	function () {
            		//hide its submenu
            		$('ul', this).stop().slideUp(100);            
        	}
    	);
 });

 </script>
 <style type="text/css">
 html {
 	background: #999;
 }
 body {
 	width: 800px;
 	margin: 0 auto;
 	background: #fff;
 }

 header {
 	background: #eee;
 }

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

 nav ul li {
 	position:relative;
 	display:inline;
 	padding: 0 10px;
 }

 nav li ul {
 	position:absolute;
 	top:1em;
 	border: 1px solid green;
 	left:0;
 	padding: 10px;
 	display:none;
 	background: #fff;
 	box-shadow: 0 0 10px rgba(0,0,0,0.1);
 } 

 </style>

 </head>

 <body>

 <header>
 <h1>My Site with Drop Downs</h1>
 	<nav>
 		<ul>
 			<li><a href="#">Lorem Ipsum</a></li>
 			<li><a href="#">Lorem Ipsum</a>
 				<ul>
 					<li><a href="#">Lorem Ipsum</a></li>
 					<li><a href="#">Lorem Ipsum</a></li>
 					<li><a href="#">Lorem Ipsum</a></li>
 					<li><a href="#">Lorem Ipsum</a></li>
 				</ul>
 			</li>
 			<li><a href="#">Lorem Ipsum</a></li>
 			<li><a href="#">Lorem Ipsum</a>
 				<ul>
 					<li><a href="#">Lorem Ipsum</a></li>
 					<li><a href="#">Lorem Ipsum</a></li>
 					<li><a href="#">Lorem Ipsum</a></li>
 					<li><a href="#">Lorem Ipsum</a></li>
 				</ul>
 			</li>
 		</ul>
 	</nav>
 </header>
 <div role="main">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio est, hendrerit vel egestas quis, pulvinar id neque. Vivamus ullamcorper lorem placerat mi lobortis eget porttitor magna congue. Aenean scelerisque massa justo. In hac habitasse platea dictumst. Donec imperdiet ullamcorper blandit. Vivamus ornare venenatis lacus eget mollis. Sed convallis diam in orci euismod luctus. Sed ut neque ipsum, eget vestibulum lectus. Nunc fermentum, ligula a condimentum iaculis, elit nisi dictum augue, ut accumsan turpis quam vitae nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida posuere nunc ac viverra. Sed tristique venenatis mi a luctus.

 Praesent ornare lorem vel lacus malesuada tincidunt. Quisque at purus ac nisi molestie tempor bibendum eu justo. Integer orci dui, gravida et auctor eget, sodales eget nibh. Nam id lacus lacus. Pellentesque volutpat, nibh nec volutpat tincidunt, velit sem condimentum lacus, quis auctor nulla metus non lacus. Vivamus non libero suscipit ipsum condimentum scelerisque. Aliquam ultrices tristique elit, vel molestie neque egestas vel. Vivamus ultricies odio eget metus dignissim nec pulvinar lacus molestie. Nullam eget sem risus. Suspendisse at vestibulum erat. Ut nec leo sit amet nisi cursus sollicitudin. Ut ac nibh metus. Maecenas imperdiet ornare orci sed aliquet. In et est massa, eu auctor ante.

 Sked vel mauris nisl. Sed lorem nisl, mattis eu laoreet ac, interdum sed sem. Nulla dignissim varius ipsum, at mattis risus interdum eu. Nunc a ante et eros bibendum blandit ut nec quam. Fusce id tortor vel quam blandit ultrices at vitae ante. Praesent congue iaculis sapien, vel hendrerit libero tempor vel. Duis nec libero velit. Fusce sodales sapien neque. Vestibulum tortor sapien, vestibulum quis aliquam sagittis, eleifend sit amet tellus. Morbi risus nisi, scelerisque et faucibus at, mattis ac arcu. Ut in elit sit amet justo egestas dignissim vitae euismod est. Nam suscipit interdum euismod.
 </div>
 </body>
 </html>

	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Dropdowns</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<script>

	$(document).ready(function() {
	$('header nav li').hover(
	function () {
	//show its submenu
	$('ul', this).stop().slideDown(100);
	},
	function () {
	//hide its submenu
	$('ul', this).stop().slideUp(100);
	}
	);
	});

	</script>
	<style type="text/css">
	html {
	background: #999;
	}
	body {
	width: 800px;
	margin: 0 auto;
	background: #fff;
	}

	header {
	background: #eee;
	}

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

	nav ul li {
	position:relative;
	display:inline;
	padding: 0 10px;
	}

	nav li ul {
	position:absolute;
	top:1em;
	border: 1px solid green;
	left:0;
	padding: 10px;
	display:none;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}

	</style>

	</head>

	<body>

	<header>
	<h1>My Site with Drop Downs</h1>
	<nav>
	<ul>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a>
	<ul>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a></li>
	</ul>
	</li>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a>
	<ul>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a></li>
	</ul>
	</li>
	</ul>
	</nav>
	</header>
	<div role="main">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio est, hendrerit vel egestas quis, pulvinar id neque. Vivamus ullamcorper lorem placerat mi lobortis eget porttitor magna congue. Aenean scelerisque massa justo. In hac habitasse platea dictumst. Donec imperdiet ullamcorper blandit. Vivamus ornare venenatis lacus eget mollis. Sed convallis diam in orci euismod luctus. Sed ut neque ipsum, eget vestibulum lectus. Nunc fermentum, ligula a condimentum iaculis, elit nisi dictum augue, ut accumsan turpis quam vitae nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida posuere nunc ac viverra. Sed tristique venenatis mi a luctus.

	Praesent ornare lorem vel lacus malesuada tincidunt. Quisque at purus ac nisi molestie tempor bibendum eu justo. Integer orci dui, gravida et auctor eget, sodales eget nibh. Nam id lacus lacus. Pellentesque volutpat, nibh nec volutpat tincidunt, velit sem condimentum lacus, quis auctor nulla metus non lacus. Vivamus non libero suscipit ipsum condimentum scelerisque. Aliquam ultrices tristique elit, vel molestie neque egestas vel. Vivamus ultricies odio eget metus dignissim nec pulvinar lacus molestie. Nullam eget sem risus. Suspendisse at vestibulum erat. Ut nec leo sit amet nisi cursus sollicitudin. Ut ac nibh metus. Maecenas imperdiet ornare orci sed aliquet. In et est massa, eu auctor ante.

	Sked vel mauris nisl. Sed lorem nisl, mattis eu laoreet ac, interdum sed sem. Nulla dignissim varius ipsum, at mattis risus interdum eu. Nunc a ante et eros bibendum blandit ut nec quam. Fusce id tortor vel quam blandit ultrices at vitae ante. Praesent congue iaculis sapien, vel hendrerit libero tempor vel. Duis nec libero velit. Fusce sodales sapien neque. Vestibulum tortor sapien, vestibulum quis aliquam sagittis, eleifend sit amet tellus. Morbi risus nisi, scelerisque et faucibus at, mattis ac arcu. Ut in elit sit amet justo egestas dignissim vitae euismod est. Nam suscipit interdum euismod.
	</div>
	</body>
	</html>