jQuery
/
1.html

<!DOCTYPE html>
<html>

	<head>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style>
			nav a {
				text-decoration: none;
			}

			nav > ul > li {
				float: left;
				text-align: center;
				padding: 0 0.5em;
			}

			nav li ul.sub-menu {
				display: none;
				padding-left: 0 !important;
			}

			.sub-menu li {
				color: white;
			}

			.sub-menu li:hover {
				background-color: black;
			}

			.sub-menu li:hover a {
				color: white;
			}

			ul {
				list-style: none;
			}
		</style>
	</head>

	<body>
		<nav>
			<ul>
				<li><a href="#">Home
               <ul class="sub-menu">
               <li><a href="#">sub1</a></li>
				<li><a href="#">sub2</a></li>
				<li><a href="#">sub3</a></li>
			</ul>
			</li>
			<li><a href="#">Programming
           <ul class="sub-menu">
           <li><a href="#">sub1</a></li>
			<li><a href="#">sub2</a></li>
			<li><a href="#">sub3</a></li>
			</ul>
			</li>
			<li><a href="#">Japanese
            <ul class="sub-menu">
            <li><a href="#">sub1</a></li>
			<li><a href="#">sub2</a></li>
			<li><a href="#">sub3</a></li>
			</ul>
			</li>
			</ul>
		</nav>
	</body>
	<script type="text/javascript">
			$('nav li').hover(function() {
				$(this).find('.sub-menu').css('display', 'block');
			}, function() {
				$(this).find('.sub-menu').css('display', 'none');
			});
	</script>

</html>