<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nav</title>
<style>
body{
font-family:Calibri, Arial, Verdana, sans-serif;
}
#nav{
list-style:none;
padding:0;
margin:0 0 20px 0;
width:100%;
overflow:hidden;
background:#da1b43;
background:-moz-linear-gradient(-90deg, #f43059, #da1b43);
background:-webkit-gradient(linear, left top, left bottom, from(#f43059), to(#da1b43));
}
#nav li{
float:left;
}
#nav a{
padding:5px;
display:block;
color:#fff;
text-decoration:none;
border-left:1px solid #ff5176;
border-right:1px solid #b82745;
}
#nav a:hover{
background:#222;
background:-moz-linear-gradient(-90deg, #666, #222);
background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#222));
}
#nav li:first-of-type a{
border-left:none;
}
#nav li:last-of-type a{
border-right:none;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</body>
</html>