Back to CSS Tips
Preview: what the working site looks like.

Pure CSS3 nth-of-type Menu with page indicator

This menu demo is loosely based on this menu example and uses a twist based on this method of page indication.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
	<div id="container">
		<header>
			<?php include("menu/menu.php"); ?>
		</header>
		<div id="content">        
			<h1>Pure CSS3 nth-of-type Menu with page indicator</h1>
				<p>
					This menu demo is loosely based on <a href="http://www.script-tutorials.com/pure-css3-lavalamp-menu/">this menu example</a> 
					and uses a twist based on <a href="http://nopeople.com/CSS%20tips/h_ul_menu_no_images/index.html">this method of page indication</a>.
				</p>
				<p>
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
					aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
					sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
					duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
				</p>
		<!--end content--></div>
	<!--end container--></div>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 900px;
	margin: 30px auto;
	border: 2px solid #000;
	border-radius: 0 5px 5px 5px;
	border-width: 0 1px 1px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
	body#home #container {margin-bottom: 900px;}
header {
	height: 219px;
	position: relative;
	background: url(images/fog.jpg);
}
#content {padding: 20px;}
h1 {
	width: 500px;
	margin: 0 auto;
	padding: 10px 0;
	background: #FC3;
	text-align: center;
	font-weight: bold;
	text-shadow: 0px 0px 0px #666666;
	border: outset;
	border-color: black;
	border-radius: 10px;
}
ul#nav, 
ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none outside none;
	font-size: 0.8em;
}
ul#nav ul {
	position: absolute;
	left: -9999px;
	overflow: hidden;
	background: #222;
	border-radius: 0 5px 5px 5px;
	border-width: 0 1px 1px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
	ul#nav li {
	line-height: 25px;
	float: left;
	position: relative;
	background: url(images/menu_line.png) no-repeat left center;
	}
		ul#nav li:first-child {background: none;}
			ul#nav li a {
				color: #fff;
				display: block;
				float: left;
				font-weight: normal;
				padding: 0 20px;
				text-decoration: none;
				text-shadow: 1px 1px 1px #000000;
			}
			ulul#nav li:hover > a {color: #00b4ff;}
	ul#nav li:hover, 
	ul#nav a:focus, 
	ul#nav a:hover, 
	ul#nav a:active {
		background: #121212;
		outline: 0 none;
	}
	ul#nav li:hover ul.subs {
		left: 0;
		top: 25px;
	}
		ul#nav ul li {
			background: none;
			width: 100%;
		}
			ul#nav ul li a {float: none;}
			ul#nav ul li:hover > a {
				background: #121212;
				color: #00b4ff;
			}
ul#nav li#pointer {
	height: 16px;
	width: 64px;
	position: absolute;
	top: -4px;
	background: url(images/arrow.png);
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
}
				body#home li#pointer {left: 5px;}
				body#gallery li#pointer {left: 81px;}
				body#forum li#pointer {left: 158px;}
				body#shortcuts li#pointer {left: 243px;}
				body#guestbook li#pointer {left: 340px;}
				body#links li#pointer {left: 425px;}
ul#nav li#pointer:hover {
	-moz-transition-duration: 3000s;
	-ms-transition-duration: 3000s;
	-o-transition-duration: 3000s;
	-webkit-transition-duration: 3000s;
	transition-duration: 3000s;
}
ul#nav li:nth-of-type(1):hover ~ li#pointer {left: 5px;}
ul#nav li:nth-of-type(2):hover ~ li#pointer {left: 81px;}
ul#nav li:nth-of-type(3):hover ~ li#pointer {left: 158px;}
ul#nav li:nth-of-type(4):hover ~ li#pointer {left: 243px;}
ul#nav li:nth-of-type(5):hover ~ li#pointer {left: 340px;}
ul#nav li:nth-of-type(6):hover ~ li#pointer {left: 425px;}
		
The ServerSide include, named menu.php
			<ul id="nav"> 
				<li><a href="index.html">Home</a></li>
				<li><a href="gallery.html">Gallery</a>
					<ul class="subs">
						<li><a href="#">Blog</a></li>
						<li><a href="#">Our Original Site</a></li>
					</ul>
				</li>
				<li><a href="forum.html">Forum</a></li>
				<li><a href="shortcuts.html">Shortcuts</a>
					<ul class="subs">
						<li><a href="#">XP</a></li>
						<li><a href="#">Vista</a></li>
						<li><a href="#">Windows 7</a></li>
						<li><a href="#">Windows 8</a></li>
						<li><a href="#">Mac</a></li>
						<li><a href="#">PhotoShop</a></li>
						<li><a href="#">Dreamweaver</a></li>
						<li><a href="#">Brackets</a></li>
					</ul>
				</li>
				<li><a href="guestbook.html">Guestbook</a></li>
				<li> <a href="links.html">Links</a>
					<ul class="subs">
						<li><a href="#">Out and About</a></li>
						<li><a href="#">Services</a></li>
						<li><a href="#">Useful Links</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</li>   
				<li id="pointer"></li>      
			</ul>
		
The Images
arrow separator