Css Tab Sistemi Başlıkları

Yukarıdaki görünümü css ile sağlamaya çalışıyorum ama başaramadım.Tek tek z-index vermekte istemiyorum.

Nasıl yapabilirim.

eğer php kullanıyorsan örnek verebilrim.

<?php	if($sayfa=="anasayfa") { $sayclassana='first active first-active'; }
	elseif($sayfa=="yeni-cikanlar") { $sayclass1='active'; }
	elseif($sayfa=="one-cikanlar") { $sayclass2='active'; }
	elseif($sayfa=="yakinda") { $sayclass3='active'; }
	elseif($sayfa=="hileler") { $sayclass4='active'; }
	elseif($sayfa=="butun-oyunlar") { $sayclass5='active'; }
	elseif($sayfa=="haberler") { $sayclass6='active'; }
	elseif($sayfa=="iletisim") { $sayclass7='active'; }
	?>
	
    


      
          <ul>
            <li class="<?php echo $sayclassana; ?>"><a href="<?php echo $siteurl; ?>">Anasayfa</a><span class="sep">&nbsp;</span></li>
            <li class="<?php echo $sayclass1; ?>"><a href="<?php echo "$siteurl/yeni-cikanlar/"; ?>">Yeni Çıkanlar</a><span class="sep">&nbsp;</span></li>
            <li class="<?php echo $sayclass2; ?>"><a href="<?php echo "$siteurl/one-cikanlar/"; ?>">Öne Çıkanlar</a><span class="sep">&nbsp;</span></li>
			<li class="<?php echo $sayclass3; ?>"><a href="<?php echo "$siteurl/yakinda/"; ?>">Yakında</a><span class="sep">&nbsp;</span></li>
			<li class="<?php echo $sayclass4; ?>"><a href="<?php echo "$siteurl/hileler/"; ?>">Hileler </a><span class="sep">&nbsp;</span></li>
            <li class="<?php echo $sayclass5; ?>"><a href="<?php echo "$siteurl/butun-oyunlar/"; ?>">Bütün Oyunlar</a><span class="sep">&nbsp;</span></li>
			<li class="<?php echo $sayclass6; ?>"><a href="<?php echo "$siteurl/haberler/"; ?>">Haberler </a><span class="sep">&nbsp;</span></li>
			<li class="<?php echo $sayclass7; ?>"><a href="<?php echo "$siteurl/iletisim/"; ?>">İletişim</a><span class="sep">&nbsp;</span></li>

float ile yan yana getirip margin-right: -20px yaptım artından aktif classı atayıp ona z-index verdim.