Нужно убрать точку перед первым элементом, и убрать отступ у последнего элемента. Возможно есть проще решение сделать такое горизонтальное меню. В общем за пример как мне нужно, взял меню отсюда (с этого сайта):
https://jsfiddle.net/4nj47owc/
<ul class="down-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
.down-menu{
margin-bottom: 0;
}
.down-menu > li > a{
font-family: 'Source Sans Pro', sans-serif;
color: #707e8c;
font-size: 14px;
font-weight: 400;
transition: all .5s;
}
.down-menu > li > a:hover{
color: #00bc9c;
text-decoration: none;
}
.down-menu > li > a:focus{
text-decoration: none;
}
.down-menu{
float: right;
padding: 0;
}
.down-menu li{
float: left;
}
.down-menu a{
padding-right: 25px;
}
ul{
font-size: 12px;
}