Try the following CSS:
#nav {
float: right;
width: 750px;
clear: both;
margin-bottom: 15px; /* added a bottom margin of 15px */
}
#nav li a {
display: block;
width: auto;
color: #FFF;
text-decoration: none;
font-size: 12px;
text-align: center;
margin: 6px 14px; /* changed right and left margin to 14px */
padding: 6px;
font-weight: bold;
line-height: 2px;
}
In order to remove the last right hand dotted border, you can try applying a class to the last list item in your nav's HTML markeup. Then, write some CSS such as:
.last {
border-right: none;
}