1. <div class="home-banner">
   			<ul class="services">
   									<li class="item-1"><a href="#">love</a></li>
   										<li class="item-2"><a href="#">love o</a></li>
   										<li class="item-3"><a href="#">love 2 <br> Marketing</a></li>
   										<li class="item-4"><a href="#">love 3 <br> Optimization</a></li>
   										<li class="item-5"><a href="#">love love 4 </a></li>
   										<li class="item-6"><a href="#">love 6</a></li>
   										<li class="item-7"><a href="#">love  7</a></li>
   								</ul>
   			<ul class="desc">
   				<li style="display: list-item;">
   					&nbsp;
   <h2>Say <br>
   My<br>
   Love</h2>	
   				</li>
   									<li class="seo">OK ok 1 </li>
   										<li class="ppc">OK ok 2</li>
   										<li class="e-mail-marketing">OK ok 3</li>
   										<li class="conversion-rate-optimization">OK ok 4</li>
   										<li class="social-media">OK ok 4</li>
   										<li class="online-pr">OK ok 6</li>
   										<li class="website-landing-page-design">OK ok 7</li>
   								</ul>
   		</div></div>

Here the Css code

1. .home-banner { margin: 7px 0 25px; position: relative; height: 396px; width: 100%; background: url(images/home-banner.png) no-repeat 112px 0; }
   .home-banner .services li { position: absolute; list-style: none; font-family: 'TradeGothic-Light'; font-size: 28px; line-height: 30px; color: #434343; cursor: pointer; }
   .home-banner .services li a { text-decoration: none; color: #434343; display: block; }
   .home-banner .services li a:hover { text-decoration: none; }
   .home-banner .services li.item-1 { padding: 20px 80px 20px 0; top: 55px; left: 52px; }
   .home-banner .services li.item-2 { padding: 20px 80px 20px 0; top: 133px; left: 77px; }
   .home-banner .services li.item-3 { padding: 20px 80px 20px 0; top: 213px; left: 42px; text-align: right; }
   .home-banner .services li.item-4 { padding: 10px 0 10px 90px; top: 15px; right: 46px; font-size: 26px; }
   .home-banner .services li.item-5 { padding: 16px 0 28px 90px; top: 110px; right: 52px; font-size: 26px; }
   .home-banner .services li.item-6 { padding: 20px 0 18px 76px; top: 188px; right: 31px; font-size: 26px; }
   .home-banner .services li.item-7 { padding: 10px 0 10px 90px; top: 275px; right: -4px; font-size: 26px; }
   .home-banner .desc li { position: absolute; top: 120px; left: 353px; list-style: none; font-size: 21px; line-height: 23px; text-align: center; width: 214px; display: none; }
   .home-banner .desc li.online-pr { top: 100px; font-size: 20px; }
   .home-banner .desc li h2 { font-family: 'TradeGothicBoldCn'; font-size: 44px; line-height: 46px; color: #3a3a3a; font-weight: normal; }
   .home-banner .desc li h3 { font-family: 'TradeGothic-Light'; font-size: 28px; line-height: 30px; color: #434343; font-weight: normal; }
   .root { position: relative; width: 965px; margin: 0 auto;}
   .ppc,.seo,.e-mail-marketing{margin-top:10px;}

and here the jQuery code 

1. jQuery(function($) {$('.desc li:eq(0)').show();
   	formJS();
   	var suspend;
   	$('.widget_black_studio_tinymce').each(function() {
   		if($(this).find('h3').length) {
   			$(this).addClass('side-services');
   		}
   	})
   	$(document).on('mouseenter', '.services li', function(){
   		clearTimeout(suspend);
   		$self = $(this);
   
   		showIt = setTimeout( function(){
   			var index = $self.index() + 1;
   			var position = -(index * 396);
   			$('.home-banner').css('background-position', '112px '+ position +'px');
   			$('.desc li').hide();
   			$('.desc li:eq(' + index + ')').fadeIn();
   		}, 250);
   	}).on('mouseleave', '.services li', function(){
   		clearTimeout(showIt);
   		suspend = setTimeout( function(){
   			if ( $('.desc li:first').is(':visible')) {
   				return false;
   			}
   
   			else { 
   				$('.desc li').hide();
   				$('.desc li:eq(0)').fadeIn();
   				$('.home-banner').css('background-position', '112px 0');
   			}
   		}, 500);
   	});

thanks kbwood.au for the replay but it's not sound it's html mistake i ask about jQuery