Posted By

thehamilton on 12/28/09

Tagged

Versions (?)

Last Edited at 12/28/09 09:24am

Statistics

Viewed 406 times

Favorited by 2 user(s)

Related snippets

Simple Verticle Nav List

/ Published in: HTML

A simple vertical navigation using UL. Nothing fancy but it's solid.

Highlighted TextExpand

#myAnncBox {
		position: absolute;
		top: 200px; left: 0; z-index: 10;
		width: 150px;
		margin: 0; padding: 0;
	}
	
		.anncList {
			list-style-type: none;
			width: 150px;
			margin: 0; padding: 0;
		}
		
			.anncList li {
				display: block;
				width: 150px;
				margin: 0; padding: 0;
				line-height: 0;
				font-size: 0;
			}
			
			a.anncListLink:link, a.anncListLink:active, a.anncListLink:visited {
				display: block;
				font: bold 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
				color: #003366;
				text-decoration: none;
				margin: 0; padding: 0;
				backgroundcolor: #FFF;
				cursor: pointer;
				border-bottom: 1px solid #CCC;
			}
			
			a.anncListLink:hover {
				color: #FFF;
				background-color: #003366;
				border-bottom: 1px solid #000;
			}
			
			.anncListLink em {
				display: block;
				width: 130px;
				margin: 0 10px; padding: 10px 0;
				font-style: normal;
			}

</style>

<div id="myAnncBox">
	<ul class="anncList">
		<li>
			<a href="#" class="anncListLink" title="Link Item">
				<em>Find a Physician</em>
			</a>
		</li>
		<li>
			<a href="#" class="anncListLink" title="Link Item">
				<em>Driving Directions</em>
			</a>
		</li>
		<li>
			<a href="#" class="anncListLink" title="Link Item">
				<em>Newsletter Signup</em>
			</a>
		</li>
		<li>
			<a href="#" class="anncListLink" title="Link Item">
				<em>Medical News</em>
			</a>
		</li>
	</ul>
</div>

URL: simple_nav_list

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.