Перемещение цвета фона в режиме зависания

Question

Я пытаюсь создать эффект ливрования в раскрывающемся списке, например, следующую ссылку.

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

Как li цвет фона, движущегося от одного к другому lili в раскрывающемся меню в состоянии парения.

Я попытался следующие

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menuPan"> 
 
\t <div class="container"> 
 
    \t <ul class="menu" id="menu-mainmenu"><li class="personalLink"><a href="#">Link 1</a> 
 
<ul class="sub-menu" style="display: none;"> 
 
\t <li class="menu-item"><a href="#">Sub Link One</a></li> 
 
\t <li class="menu-item"><a href="#">Sub Link Two</a></li> 
 
\t <li class="menu-item"><a href="#">Sub Link Three</a></li> 
 
\t <li class="menu-item"><a href="#">Sub Link Four</a></li> 
 
\t <li class="menu-item"><a href="#">Sub Link Five</a></li> 
 
\t <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"> 
 
\t <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>

Я также создать jsFiddle file

Answer 1

Пытались это вы?

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

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

Answer 2

Это, как я реализовал эффект:

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

Here is the JSFiddle demo

Обратите внимание, что CSS г-индекс имеет важное значение, остальная часть CSS предназначены для украшения.