具有滑动悬停效果的导航菜单

Question

任何人都可以帮助我做到这一点吗？我有一个导航/菜单栏。每当我徘徊在任何＆＃34; li＆＃34;它获得背景颜色（红色）。每当我将光标移动到下一个/上一个li时我想要做什么我想以平滑的效果移动background color。当我从导航/菜单栏移出时，背景颜色（红色）应该回到＆＃34; Home li＆＃34;作为默认值。请检查我的以方便您使用。

＆＃13;

＆＃13;

$('nav li').hover(
 function() {
  $('ul', this).stop().slideDown(200);
 },
function() {
 $('ul', this).stop().slideUp(200);
}
);

 function myFunction() {
   var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
   }
 }

＆＃13;

nav {background: #2ba0db;}
nav ul {font-size : 0;margin : 0;padding : 0;}
nav ul li { display : inline-block; position : relative;}
nav ul li:first-Child {display : inline-block;position :   relative;background:red;}

nav ul li a {color : #fff;display : block;font-size:14px;padding:15px  14px; transition : 0.3s linear;text-decoration: none;}

nav ul li:hover {background : red;}

nav ul li ul {border-bottom : 5px solid #2ba0db;display : none;position : absolute;width : 250px;z-index: 1;}
nav ul li ul li {border-top : 1px solid #444;display : block;}

nav ul li ul li:first-child{border-top none;}
nav ul li ul li a {
  background: #373737;
  display: block;
  padding:10px 14px; 
  text-decoration: none;
}

nav ul li ul li a:hover { 
  background: #126d9b;
}
ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:680px) { 
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {float: right;display: inline-block;}}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position:relative;}
  ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;}
  ul.topnav.responsive li {float: none;display: inline; }
  ul.topnav.responsive li a {display: block;text-align: left; }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <a href="#">Categories </a>
    <ul>
      <li><a href="#">Category One</a></li>
      <li><a href="#">Category Two</a></li>
      <li><a href="#">Category Three</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你在找什么？ （第二个例子）

https://css-tricks.com/examples/MagicLine/