SiteWizard Nav

by andyjh07

HTML

<ul id="nav">
	<li><a href="#" id='active'>Home</a></li>
	<li class="nav_parent"><a href="#" >Services</a>
		<ul class="nav_child">
			<li><a href="#">List Item 1</a></li>
			<li><a href="#">List Item 2</a></li>
			<li><a href="#">List Item 3</a></li>
			<li><a href="#">List Item 4, Extra Long Title</a></li>
			<li><a href="#">List Item 5</a></li>
			<li><a href="#">List Item 6</a></li>
			<li class="nav_parent2">
				<a href="#" >Second Level Dropdown</a>
					<ul class="nav_child2">
						<li><a href="#">List Item 7.1</a></li>
						<li><a href="#">List Item 7.2</a></li>
						<li><a href="#">List Item 7.3</a></li>
						<li><a href="#">List Item 7.4</a></li>
						<li><a href="#">List Item 7.5</a></li>
						<li><a href="#">List Item 7.6</a></li>
					</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Testimonials</a></li>
	<li><a href='#'>Contact us</a></li>
</ul>

CSS

/* Navigation
======================= */
#nav {
	margin:0px auto;
	padding:0;
	list-style-type:none;
	position:relative;
	text-align:left;
	width:100%;
	z-index:5000;
	display:table;
}
#nav li {
  display:table-cell;
  position:relative;
  text-align:left;
}

#nav a {
	color:#333;
	font-size:14px;
	padding:.75em 1.5em;
	text-decoration:none;
	text-transform:capitalize;
	display:block;
	border-top:3px solid blue;
}
#nav a:visited {color: yellow;}
#nav a:hover,
#nav a:focus,
#nav a:active {
	color: white;
	background:deeppink;
	border-color:deeppink;
}
/*
 * Keep hover state for dropdown when no browsing items in nav_child
 */
#nav .nav_parent:hover > a,
#nav .nav_parent:focus > a,
#nav .nav_parent:active > a {
	background:deeppink;
	border-color:deeppink;
	color:white;
	}
#nav #active {
	position:relative;
	border-color:deeppink;
}

#nav ul {
	position:absolute;
	list-style-type:none;
	display:none;
	margin:0;
	z-index:999;
	padding:0;
}
#nav li:hover ul,
#nav li:focus ul,
#nav li:active ul {
	display:block;
}
#nav ul li {
	display:block;
}
#nav ul a {
	background:deeppink;
	color:white;
	padding:.75em 1.5em;
	border:0;
	white-space:nowrap;
}
#nav ul a:hover,
#nav ul a:focus,
#nav ul a:active {
	background:lime;
	color:white;
}
#nav ul ul {
}
#nav li ul ul {
	margin:0;
  padding:0;
  position:absolute;
  left:100%;
  top:0;
}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li:focus ul ul,
#nav li:focus ul ul ul,
#nav li:focus ul ul ul ul,
#nav li:active ul ul,
#nav li:active ul ul ul,
#nav li:active ul ul ul ul {
	display:none;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul,
#nav li:focus ul,
#nav li li:focus ul,
#nav li li li:focus ul,
#nav li li li li:focus ul,
#nav li:active ul,
#nav li li:active ul,
#nav li li li:active ul,
#nav li li li li:active ul {
	display:block;
}