Как выделить активный пункт меню сдегка его приподняв? - Вопросы по CSS

<div class="top_position">

			<?php switch ($_SERVER['REQUEST_URI']) {

				case '/gruzoperevozki.html' : $back1='active1';

					break;

                                case '/gruzchiki.html' : $back3='active3';

					break;

				case '/vyvoz-musora.html' : $back2='active2';

					break;

				
				case '/zemlyanye-podsobnye-raboty.html' : $back4='active4';

					break;

				case '/arenda-spetstekhniki.html' : $back5='active5';

					break;

                                case '/blagoustrojstvo.html' : $back6='active6';

					break;

			}?>

			<a class="top1 <?php echo $back1;?>" href="/gruzoperevozki.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu1.png"></a>

            <a class="top2 <?php echo $back3;?>" href="/gruzchiki.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu2.png"></a>

			<a class="top3 <?php echo $back2;?>" href="/vyvoz-musora.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu3.png"></a>

			<a class="top4 <?php echo $back4;?>" href="/zemlyanye-podsobnye-raboty.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu4.png"></a>

			<a class="top5 <?php echo $back5;?>" href="/arenda-spetstekhniki.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu5.png"></a>

            <a class="top6 <?php echo $back6;?>" href="/blagoustrojstvo.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu6.png"></a>

			<div class="clear"></div>

		</div>

		

		<div class="center_table">

.top_position {

	width: 99%;

	height: 100%;

	text-align: center;

	margin-bottom: 20px;

}

.top_position a {

   display:inline-block;

   text-align:right;

   width:18%;

   margin-left: -2%;

   padding-bottom: 5px;

   text-decoration:none;

}

.top_position a img {

}

.top_position a:hover {

}

.top_position a.active1 {

	

}

.top_position a.active2 {

	

}

.top_position a.active3 {

	

}

.top_position a.active4 {

	

}

.top_position a.active5 {



}

.top_position a.active6 {

	

}

.top_position a img:hover {

	opacity: 0.8;

}

.top_position a.active1 {

	margin-top:2px;

}

.top_position a.[class^="active"] {
    position: relative;
    top: -2px;
}