Moving background color in li hover

Question

I am trying to create li hover effect in drop-down, like the following link.

http://pitch.select-themes.com/home-agency/

Like the li background color moving from one li to another li in dropdown in hover state.

I have tried the following

$(document).ready(function(){
						   
	$('.menu li').hover(function(){
		$(this).children('ul').fadeIn(300);
	},
	function () {
		$(this).children('ul').fadeOut(300);							 
	});
  
});

*{
 padding:0; 
 margin:0; 
}
.menuPan{
	background-color:#b3b3b3;
	text-align:center;
	padding:5px 0;
}
.menuPan ul li{
	display:inline-block;
	padding:0 12px 0 12px;
	text-transform:uppercase;
	border-right:solid 2px #fff;
	font-weight:700;
	font-size:12px;
	position:relative;
	z-index:999;
}
.menuPan ul li:last-child{
	border-right:0;	
}
.menuPan ul li a{
	color:#fff;
	display:block;
	line-height:20px;
	padding:5px 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
  text-decoration:none;
}
.menuPan ul li a:hover{
	color:#d2d2d2;
}
.menuPan ul li.personalLink a:hover, 
.menuPan ul li.personalLink.current_page_item a{
	color:#c0f241;
}
.menuPan ul li.businessLink a:hover, 
.menuPan ul li.businessLink.current_page_item a{
	color:#0088ce;
}
.menuPan ul li.motorLink a:hover, 
.menuPan ul li.motorLink.current_page_item a{
	color:#7c367b;
}
.menuPan ul li ul{
	position:absolute;
	top:30px;
	left:0;
	background-color:#b3b3b3;
	text-align:left;
	display:none;

}
.menuPan ul li ul li{
	border-right:0;
	display:block;
	font-weight:600;
	border-bottom:solid 1px #c2c2c2;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.menuPan ul li ul li a{
	display:block;
	white-space:pre;
}
.menuPan ul li ul li:hover{
	background-color:#fff;
	background-color:#9f9f9f;
}
.menuPan ul li ul li:hover a{
	color:#fff;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuPan">
	<div class="container">
    	<ul class="menu" id="menu-mainmenu"><li class="personalLink"><a href="#">Link 1</a>
<ul class="sub-menu" style="display: none;">
	<li class="menu-item"><a href="#">Sub Link One</a></li>
	<li class="menu-item"><a href="#">Sub Link Two</a></li>
	<li class="menu-item"><a href="#">Sub Link Three</a></li>
	<li class="menu-item"><a href="#">Sub Link Four</a></li>
	<li class="menu-item"><a href="#">Sub Link Five</a></li>
	<li class="menu-item"><a href="#">Sub Link Six</a></li>
</ul>
</li>
<li class="businessLink"><a href="#">Link 2</a>
<ul class="sub-menu">
	<li class="menu-item"><a href="#">Sub Link Three</a></li>
</ul>
</li>
<li class="motorLink"><a href="#">Link 3</a></li>
</ul>
</div>
</div>

I have also create a jsFiddle file

Answer 1

This is how I implemented the effect:

$("li").hover(function() {
  $(".follow").stop().animate({
    "top": $(this).position().top
  }, 200);
});

Here is the JSFiddle demo

Note that the CSS z-index is important, the rest of the CSS are for decoration.

Answer 2

Have you tried this ?

#menu-mainmenu > li {
  background-color: blue;
  transition: 1s;
}

#menu-mainmenu > li:hover {
  background-color: red;
}