Stuff

HTML:

<div id="navigation">
		<ul id="nav">
		
					
					<li><a href="/" class="activemain">main</a></li>
					
					<li><a href="#" class="webmaster">Webmaster</a>
						<ul>
							<li><a href="#">DeviantArt</a></li>

							<li><a href="#">Projects</a></li>
							<li><a href="#">Myspace</a></li>
							<li><a href="#">Contact</a></li>
						</ul>
					</li>
					
					<li><a href="?page=art" class="art">art</a></li>
					<li><a href="?page=layouts" class="layouts">layouts</a></li>

					<li><a href="?page=tutorials" class="tutorials">tutorials</a></li>
					
					<li><a href="#" class="siterelated">Site Related</a>
						<ul>
							<li><a href="#">Link Elekchron</a></li>
							<li><a href="#">Link Exchange</a></li>
							<li><a href="#">Terms of Usage</a></li>

						</ul>
					</li>
					
					<li><a href="?page=about" class="about">about</a></li>

		</ul>
		
	</div>


CSS: 

#navigation {

	background: url('../images/navigation_bg.gif') repeat-y top left;
	width: 150px;
	height: 800px;
	float: left;
	padding-top: 30px;

}

#nav ul {

	margin: 0;
	padding: 0;
	float: left;
	width: 150px;
	
}

	#nav li {

		height: 40px;
		
	}
	
	#nav li {
	
		position: relative;
	
	}
	
	#nav li ul {
	
		position: absolute;
		left: 149px;
		top: 0;
		display: none;
	
	}
	
	#nav li ul li a{
	
		display: inline;
		text-decoration: none;
		color: #777;
		background: #333;
		padding: 5px;
		border: 1px solid white;
			
	}
	
	#nav li ul {
	
		width: 100px;
		height: 30px;
		padding: 0;
		text-align: left;
	
	}
	
	#nav li ul li {
	
		padding: 0;
		margin: 0;
		height: 20px;
	
	}
	
	#nav li:hover ul, #nav li.sfhover ul{ 
	
		display: block;
		
	}

	#navigation a {

		display: block;
		height:100%;
		text-indent: -1000em;
		overflow: hidden;
		
	}
	
	#navigation a.main {

		background: url('../images/main.gif') no-repeat;
		
	}
	
	#navigation a.art {
	
		background: url('../images/art.gif') no-repeat;
	
	}
	
	#navigation a.webmaster {
	
		background: url('../images/webmaster.gif') no-repeat;
	
	}

	#navigation a.layouts {

		background: url('../images/layouts.gif') no-repeat;

	}

	#navigation a.tutorials {

		background: url('../images/tutorials.gif') no-repeat;

	}
	
	#navigation a.siterelated {
	
		background: url('../images/siterelated.gif') no-repeat;
	
	}
	
	#navigation a.projects {
	
		background: url('../images/projects.gif') no-repeat;
	
	}

	#navigation a.tou {

		background: url('../images/tou.gif') no-repeat;
		
	}
	
	#navigation a.about {

		background: url('../images/about.gif') no-repeat;
		
	}
	
	#navigation a.activemain {
	
		background: url('../images/activemain.gif') no-repeat;
	
	}
	
	#navigation a.activeart {
	
		background: url('../images/activeart.gif') no-repeat;
	
	}
	
	#navigation a.activewebmaster {
	
		background: url('../images/activewebmaster.gif') no-repeat;
	
	}
	
	#navigation a.activelayouts {
	
		background: url('../images/activelayouts.gif') no-repeat;
	
	}
	
	#navigation a.activetutorials {
	
		background: url('../images/activetutorials.gif') no-repeat;
	
	}
	
	#navigation a.activesiterelated {
	
		background: url('../images/activesiterelated.gif') no-repeat;
	
	}
	
	#navigation a.activeprojects {
	
		background: url('../images/activeprojects.gif') no-repeat;
	
	}
	
	#navigation a.activetou {
	
		background: url('../images/activetou.gif') no-repeat;
	
	}
	
	#navigation a.activeabout {
	
		background: url('../images/activeabout.gif') no-repeat;
	
	}
	
	#navigation a.main:hover {
	
		background: url('../images/activemain.gif') no-repeat;
	
	}
	
	#navigation a.layouts:hover {
	
		background: url('../images/activelayouts.gif') no-repeat;
	
	}
	
	#navigation a.art:hover {
	
		background: url('../images/activeart.gif') no-repeat;
	
	}
	
	#navigation a.webmaster:hover {
	
		background: url('../images/activewebmaster.gif') no-repeat;
	
	}
	
	#navigation a.siterelated:hover {
	
		background: url('../images/activesiterelated.gif') no-repeat;
	
	}
	
	#navigation a.tutorials:hover {
	
		background: url('../images/activetutorials.gif') no-repeat;
	
	}
	
	#navigation a.projects:hover {
	
		background: url('../images/activeprojects.gif') no-repeat;
	
	}
	
	#navigation a.tou:hover {
	
		background: url('../images/activetou.gif') no-repeat;
	
	}
	
	#navigation a.about:hover {
	
		background: url('../images/activeabout.gif') no-repeat;
	
	}


JS:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);