CSS vertical navigation list

This is a demonstration of a vertical navigation list or menu, which pops up a vertical drop-down menu on the right side when hovered.

The HTML codes are very simple, as follows:

<ul class="nav">
<li><strong>a navigation item</strong>
	<ul>
	<li>a navigation list item</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</li>
<li><strong>a navigation item</strong>
	<ul>
	<li>another navigation list item</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</li>
<li>...</li>
...
</ul>

The ul tag is assigned with the class of nav. That's the only class needed to be refered from the style sheet. The CSS codes are shown below, with comments:


/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
	margin: 0;
	padding: 0;
	cursor: default;
	list-style-type: none;
}

ul.nav{
	width: 20ex;
/*Optional, to make the navigation bar positions on the left of the content*/
	float: left;
	margin-right: 1em;
}

ul.nav>li{
	margin: 0;
	padding: 2px 6px;
}

ul.nav li>ul{
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	width: 20ex;
	left: 20ex;
	margin-top: -1.4em;
	margin-left: 9px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
	display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding: 2px 10px;
}

/*** Menu styles (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
	background-color: #fff;
	color: #369;
}

ul.nav li:hover,
.nav ul li a:hover{
	background-color: #369;
	color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
	background-color: #036;
	color: #fff;
}

ul{
	border: 1px solid #369;
}

.nav a{
	text-decoration: none;
}

Notes

Please note that the look of the navigation bar can be changed and modified with a few tweaks into the codes based on your knowledge of (X)HTML and CSS with some trial and error experiments.

One of the disadvantages of this navigation bar is that currently it's only limited to two-level navigational list, not more than three as it might break the whole layout. Though it's not impossible to create multi-level ones, but I'm more focus on keeping the markup clean, without the need of using multiple ids or classes. Again, display: none is not friendly for screen readers.

| Home |