Bullettproof Slants

Bullettproof Slants Website

Example




CSS Code



/* navigation */
	
#nav {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #ccc;
	border-bottom: 1px solid #999;
}

#nav li { 
	float: left;
	margin: 0;
	padding: 0;
}
	
#nav a {
	float: left;
	display: block;
	padding: 6px 30px 6px 5px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #666;
	background: #ccc url(../img/nav_slant.gif) no-repeat top right;
}
	
#nav #nav-1 a {
	padding-left: 20px;
}
	
#nav a:hover {
	color: #000;
}

/* more */
	
ul#more {
	clear: left;
	margin-top: 60px;
}

HTML Code



<ul id="nav">
 <li id="nav-1"><a href="#">Debaser</a></li>
 <li id="nav-2"><a href="#">Gigantic</a></li>
 <li id="nav-3"><a href="#">Velouria</a></li>
 <li id="nav-4"><a href="#">Havalina</a></li>
</ul>

Images