将鼠标悬停在菜单项上返回上一项

Question

我创建了一个包含4个项目的大型菜单，它运行良好。

问题是，当将鼠标悬停在某个项目上时，它将转到我将其悬停在其上的最后一个项目上。

这是我的代码的一个简短提示

<nav class="main-menu">
    <div class="navbar-header">
        <div class="navbar-collapse collapse clearfix">
            <ul class="navigation clearfix">
               <li class="dropdown  has-mega-menu is-dropdown-submenu-parent">
                  <a href="home.php" >Home</a>
                     <div class="mega-menu">
                      /* list of items */
                     </div>    
               </li>
               <li class="dropdown  has-mega-menu is-dropdown-submenu-parent">
                  <a href="projects.php" >Projects</a>
                      <div class="mega-menu">
                       /* list of items */
                       </div>
               </li>
               /* two more li items for the menu */
           </ul>
       </div>
   </div>
</nav>

CSS代码

.main-menu .navigation > li > .mega-menu{
position:absolute;
left:0px;
width:100%;
background-color: #ffffff;
padding: 30px;
top: 100%;
z-index:-1;
margin-top:0px;
display:none;
background-position:right bottom;
background-repeat:no-repeat;
transition:all 500ms ease; 
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
-webkit-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);
-ms-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);
-o-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);
-moz-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);
box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);}

.main-menu .navigation > li:hover > .mega-menu{
opacity:1;
visibility:visible;
}

我想知道是什么引起了这个问题，我只是在CSS文件中添加了简单的悬停效果以显示下拉菜单。