Hilfe brauche richtigen Code

#tabbar{
width: XXpx;
height: XXpx;
margin-top: XXpx;
margin-bottom: XXpx;
margin-left: XXpx;
float: right/left;
}

#tabbar li{
clear: both;
}

li.tab1 a, li.tab2 a{
height:XXpx;
width: XXpx;
display:block;
}

li.tab3 a, li.tab4 a{
height:XXpx;
width: XXpx;
display:block;
}

li.tab1 a{
background-image: url(Eingefahrener Tab);
}

li.tab1 a:hover{
background-image: url(Ausgesfahrener Tab);
}

li.tab2 a{
background-image: url(Eingefahrener Tab);
}

li.tab2 a:hover{
background-image: url(Ausgesfahrener Tab);
}

li.tab3 a{
background-image: url(Eingefahrener Tab);
}

li.tab3 a:hover{
background-image: url(Ausgesfahrener Tab);
}

li.tab4 a{
background-image: url(Eingefahrener Tab);
}

li.tab4 a:hover{
background-image: url(Ausgesfahrener Tab);
}

<div id="tabbar">
<ul>
<li class="tab1"><a href="Zieladresse""></a></li>
<li class="tab2"><a href="Zieladresse"></a></li>
<li class="tab3"><a href="Zieladresse"></a></li>
<li class="tab4"><a href="Zieladresse"></a></li>
</ul>
</div>

#tabbar{
width: XXpx;
height: XXpx;
margin-top: 23px;
margin-bottom: 23px;
margin-left: -16px;
float: right;
}