Помогите доделать горизонтальное меню

.down-menu { 
  float: right; 
  margin-bottom: 0; 
  padding: 0; 
  font-size: 12px; 
} 
 
.down-menu li { 
  float: left; 
  list-style: none; 
  position: relative; 
} 
 
.down-menu li+li { 
  padding-left: 25px; 
} 
 
.down-menu li+li:before { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 10px; 
  margin-top: -2px; 
  width: 4px; 
  height: 4px; 
  background: #707e8c; 
  border-radius: 50%; 
} 
 
.down-menu a { 
  font-family: 'Source Sans Pro', sans-serif; 
  color: #707e8c; 
  font-size: 14px; 
  font-weight: 400; 
  transition: all .5s; 
} 
 
.down-menu a:hover { 
  color: #00bc9c; 
  text-decoration: none; 
} 
 
.down-menu a:focus { 
  text-decoration: none; 
}

<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>

CSS code:

   .down-menu{
       margin-bottom: 0;
    }
         li{
             list-style-type: none;
         }
    .down-menu > li > a{
       font-family: 'Source Sans Pro', sans-serif;
       color: #707e8c;
       font-size: 14px;
       font-weight: 400;
       transition: all .5s;
        padding: 10px;
    }
    .down-menu > li > a:hover{
       color: #00bc9c;
       text-decoration: none;
    }
    .down-menu{
        display: inline-flex;
        font-size: 12px;
    }

HTML code:

<div align='center' class='header'>
 <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>
</div>

Code JSFiddle

Добавь

li:first-child{
  list-style-type: none;
}

и маркера не будет

li:first-child{
  /*а сюда отступ как хочешь*/
}

а вот и черточки

li {
  list-style-type:none;
}
li:before {
  content:"\2014\0020";
}