style.css
 
.navigation {
	margin: 0.5em; 
	padding: 0.3em; 
	border: 1px solid #C4C4C4; 
	text-align: left;
}
.navigation li a:link, a:visited{
	color: #545454;
	text-decoration: none
 
}
.navigation li a:hover{
	color: #72C32B;
}
.navigation li a:active {
	color: #545454;
	text-decoration: none
}
.navigation ul{
	list-style-type: none;
	margin: 0.3em 0 0.1em 0.1em;
	padding: 0em 0 0.1em 1em;
}
 
.navigation li .popup {
	display:none;
	background-color:white;
	background-style:solid;
	position:float;
}
.navigation li:hover .popup,
.navigation li:focus .popup,
.navigation li:active .popup  {
	display:block;
}

nav.html
 
<div class="navigation">
	<ul>
		<li><a href="Home.html">Home</a></li>
		<li>
			<a href="#">Links</a>
			<div class="popup">
				<ul>
					<li><a href="link1.html">Link 1</a></li>
					<li><a href="link2html">Link 2</a></li>
					<li><a href="link3.html">Link 3</a></li>
				</ul>
			</div>
		</li>	
	</ul>
</div>

javascript
 
<script language="javascript">
	function displayMenu() {
		document.getElementById("popup").style.display = "block";
	}
 
	function hideMenu() {			
		document.getElementById("popup").style.display = "none";
	}
</script>
 
html
 
<div class="navigation">
	<h2>Menu</h2>
		<ul>
			<li>
				<a href="#" onMouseOver="javascript:displayMenu();" onMouseOut="javascript:hideMenu();">Links</a>
				<div class="popup">
					<ul>
						<li><a href="Link1.html">Link1</a></li>
						<li><a href="Link2.html">Link2</a></li>
						<li><a href="Link3.html">Link3</a></li>
					</ul>
				</div>
		</ul>
</div>