Drop-Down Navigation with CSS only

The HTML

<ul id="nav">
	<li class="home"><a href="#">Home</a></li>
	<li class="tutorials"><a href="#">Tutorials</a>
		<ul>
			<li><a href="#">Sub Menu 1</a></li>
			<li><a href="#">Sub Menu 2</a></li>
			<li><a href="#">Sub Menu 3</a></li>
		</ul>
	</li>
	<li class="about"><a href="#">About</a></li>
	<li class="news"><a href="#">Newsletter</a>
		<ul>
			<li><a href="#">Issue 1</a></li>
			<li><a href="#">Issue 2</a></li>
			<li><a href="#">Issue 3</a></li>
		</ul>
	</li>
	<li class="contact"><a href="#">Contact</a></li>
</ul>

The CSS

<style>
#nav {  
    width: 100%; 
    background-color: #333; 
    font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif; 
    float: left; 
}
#nav li { 
    list-style: none; 
    float: left; 
    width: 120px; 
    height: 30px; 
    line-height: 30px; 
    text-align: center;
} 
#nav li a { 
    color: white; 
    text-decoration: none; 
    display: block; 
} 
#nav li a:hover { 
    background-color: #066; 
} 
#home .home a, #home .home a:hover,
#tutorials .tutorials a, #tutorials .tutorials a:hover,
#about .about a, #about .about a:hover,
#contact .contact a, #contact .contact a:hover,
#news .news a, #news .news a:hover {
    background-color: #FFF; 
    color: #000;
    cursor: default;  
}       
#nav li ul { 
    position: absolute;  
    display: none; 
} 
#nav li:hover ul { 
    display: block; 
} 
#nav li ul li { 
    float: none; 
    display: inline; 
}
#nav li ul li a { 
    width: 118px; 
    position: relative; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    background: #333; 
    color: #fff; 
}
#nav li ul li a:hover { 
    background: #066; 
    color: #000; 
}
</style>

Demo – Source