当悬停被删除的div内容隐藏

Question

这里我有一个菜单现在的问题是当我悬停在任何李它显示了一些内容在左侧，但随着悬停被删除然后内容被隐藏 here is the link现在当我们悬停在菜单中的产品再上hostpital管理体系，如果我们想要去，以减少纸张的工作量，它隐藏在里我想表现detali 这里是代码

$(document).ready(function() { 
 
    $("#nav li").hover(function() { 
 
    var datatoShow = $(this).attr('data'); 
 
    $("#" + datatoShow).toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="collapse navbar-collapse js-navbar-collapse"> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="about-us.html">About Us</a></li> 
 
    <li class="dropdown mega-dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a> 
 
     <ul class="dropdown-menu mega-dropdown-menu row navigation"> 
 
     <div class="container"> 
 
      <li> 
 
      <div class="col-sm-4"> 
 
       <div class="left-area"> 
 
       <button type="button" class="btn all-product-btn">All Products</button> 
 
       <hr> 
 
       <ul id="nav"> 
 
        <li class="active-class" data="Employee"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li> 
 
        <li data="Hospital"><a href="hospital-management-software/index.html">Hospital Management Software</a></li> 
 
        <li data="School"><a href="school-management-system/index.html">School Management System</a></li> 
 
        <li data="Inventory"><a href="inventory-management-software/index.html">Inventory Management Software</a></li> 
 
        <li data="Fee"><a href="fee-management-system.html">Fee Management System</a></li> 
 
        <li data="Lead"><a href="lead-management-system/index.html">Lead Management System</a></li> 
 
        <li data="Customer"><a href="customer-relationship-management.html">Customer Relationship Management</a></li> 
 
        <li data="Human"><a href="human-resource-management-software.html">Human Resource Management Software</a></li> 
 
        <li data="Enterprises"><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li> 
 
        <li data="Commerce"><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      <div id="Employee" class="col-sm-8 nav-hide"> 
 
       <div class="right-area"> 
 
       <h3>Employee Monitoring System</h3> 
 
       <p></p> 
 
       <div class="col-md-7"> 
 
        <ul> 
 
        <li>A Unique System that peforms employee monitoring.</li> 
 
        <li>Prevents unauthorised exchange of data</li> 
 
        <li>Could not be identified by a user</li> 
 
        <li>Captures their Keystrokes</li> 
 
        <li>Caputres their Screen Shots</li> 
 
        <li>Uploads text files</li> 
 
        </ul> 
 
       </div> 
 
       <div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div> 
 
       </div> 
 
      </div> 
 
      </li> 
 

 
      <div id="Hospital" class="col-sm-8 nav-hide" style="display:none"> 
 
      <div class="right-area"> 
 
       <h3>Hospital Management Software</h3> 
 
       <div class="col-md-7"> 
 
       <ul> 
 
        <li>Reduces the amount of paper work.</li> 
 
        <li>Recording information about the Patients that come.</li> 
 
        <li>Generating bills.</li> 
 
        <li>Recording information related to diagnosis given to Patients.</li> 
 
        <li>Keeping record of the Immunization provided to children/patients.</li> 
 
       </ul> 
 
       </div> 
 
       <div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div> 
 
      </div> 
 
      </div> 
 
     </ul> 
 
     </div>

这里how it should work

应该在这种情况下excatly这样的工作菜单

Answer 1

相反，这样做

$(document).ready(function() { 
    $("#nav li").hover(function() { 
    var datatoShow = $(this).attr('data'); 
    $(".nav-hide").hide(); 
    $("#" + datatoShow).show(); 
    }); 
}); 

Answer 2

这可能是一些CSS trickery通过。

您可以通过在:hover事件时应用一些动画和缓动来玩弄自己的项目，使其看起来像IBM India网站的示例。

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown .dropdown-menu { 
 
    position: absolute; 
 
    top: 100%; 
 
    display: none; 
 
    margin: 0; 
 

 
    list-style: none; /** Remove list bullets */ 
 
    width: 100%; /** Set the width to 100% of it's parent */ 
 
    padding: 0; 
 
} 
 

 
.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} 
 

 
/** Button Styles **/ 
 
.dropdown button { 
 
    background: #FF6223; 
 
    color: #FFFFFF; 
 
    border: none; 
 
    margin: 0; 
 
    padding: 0.4em 0.8em; 
 
    font-size: 1em; 
 
} 
 

 
/** List Item Styles **/ 
 
.dropdown a { 
 
    display: block; 
 
    padding: 0.2em 0.8em; 
 
    text-decoration: none; 
 
    background: #CCCCCC; 
 
    color: #333333; 
 
} 
 

 
/** List Item Hover Styles **/ 
 
.dropdown a:hover { 
 
    background: #BBBBBB; 
 
}

<!-- dropdown container --> 
 
<div class="dropdown"> 
 

 
    <!-- trigger button --> 
 
    <button>Navigate</button> 
 

 
    <!-- dropdown menu --> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
</div>