CSS Navigation Menu

It is possible to create a simple navigation menu box with CSS. In fact I see this same style of menu for many of the templates for Mambo and WordPress. Here is a code sample of such a menu:

#menu_box {
	width: 200px;
	font-family: Verdana, Helvetica, sans-serif;
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;

#menu_box ul {
	list-style: none;
	margin: 0;
	padding: 0;

#menu_box li {
	border-botom: 1px solid #666666;

#menu_box li a {
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #0066CC;
	border-right: 1px solid #666666;
	background-color: #CCCCCC;
	color: #FFFFFF;
	text-decoration: none;

#menu_box li a:hover {
	background-color: #0066CC;
	color: #FFFFFF;

The end result is a menu without tables, that highlights when you hover over any of the links.

CSS Menu Example

CSS Menu Demo and CSS Menu StyleSheet

Filed under: CSSTagged with: , , ,

No comment yet, add your voice below!

Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *