Den ersten Punkt ansprechen

[Carmen]

Hallo,

ich habe versucht die Navigation von Sport1 nachzubauen. Hat soweit auch geklappt nur ich habe ein Problem mit dem ersten / der sollte nicht erscheinen.

Mein Online Beispiel ist hier zu sehen: http://jsfiddle.net/5ynu644x/

  
.s1-navigation>li:first-child {  
	margin-left: 0;  
}  
  
.s1-navigation>li {  
	display: inline-block;  
	vertical-align: top;  
	margin-left: 5px;  
	margin-right: 5px;  
}  
  
.s1-navigation>li:first-child>a {  
	padding-left: 2px;  
}  
  
.s1-navigation>li>a {  
	padding: 0 7px;  
	position: relative;  
}  
  
.s1-navigation a {  
	display: block;  
	color: #3d464c;  
	font-size: 16px;  
	font-weight: 600;  
	line-height: 40px;  
}  
  
.s1-navigation>li>a:before {  
	content: "";  
	position: absolute;  
	left: -6px;  
	top: 13px;  
	height: 14px;  
	width: 1px;  
	background: #d9d9d9;  
	border: 0;  
	-webkit-transform: rotate(14deg);  
	transform: rotate(14deg);  
}  

  
    <nav id="firstNav s1-main-navigation" role="navigation" background-adjustment="">  
       <ul class="s1-navigation s1-navigation-level0" role="menubar">  
            <li class="s1-nav-item s1-nav-item-live" role="presentation"><a href="#" role="menuitem" >Test</a></li>  
            <li class="s1-nav-item s1-nav-item-fussball" role="presentation"><a href="#" role="menuitem" >Test 2</a></li>  
         </ul>  

Habt Ihr eine Idee, wie ich den _ersten_ / weg bekomme?