即使鼠标悬停了，也使下拉菜单仍然可见

Question

I need to have main menu with dropdown menu items. So, when user hovers menu item then dropdown menu is shown. This is already done by CSS and :hover selector. However, usually when :hover is lost (mouse is moved outside menu item element) then appropriate dropodown also disappears. But what I need - menu is still seen and disappears only on click.

One example of this effect is here: http://theemon.com/f/forever/Livepreview/agency-wedding/index.html

However I do not understand which CSS or JS creates this effect, so I cannot add snipper here (if I could, I would not ask). In this particular example, when you hover menu item "Pages", dropdown menu appears, but it doesn't disappear when :hover is lost. It stays there. I am not able to find, what makes this effect - is it some JS or CSS?

HTML:

 <ul class="navigation clearfix">   
        <li class="active">
            <a href="#">HOME</a>
        </li>

        <li>
            <a href="#">pages</a>
            <ul class="drop-down">
                <li>
                    <a href="event.html">Event</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="blog-detail-page.html">Blog-Detail</a>
                </li>
                <li>
                    <a href="travel-info.html">Travel-Info</a>
                </li>
                <li>
                    <a href="404-page.html">404</a>
                </li>
            </ul>
        </li>
    </ul>

Some CSS:

 .clearfix {
     display: block;
  }
  ul {
      list-style-type: none;
  }
  ul, ol {
     font-size: 100%;
     line-height: 1.5;
     list-style: none;
  } 
 .navigation > li {
    padding: 16px 0px 36px 26px;
    float: left;
    position: relative;
    line-height: 1.5em;
}
.navigation > li:hover .drop-down {
    top: 76px;
    left: auto;
    left: 16px;
    right: 0;
}
.drop-down {
    position: absolute;
    top: 100px;
    width: 160px;
    z-index: 999;
    left: -9999px;
    opacity: 0;
    transition: top .2s ease, opacity .2s ease;
}   

Answer 1

You can add a class like .open on mouseenter to your li element which contains a dropdown.

Then do this:

var dropdown = $(".is-dropdown");

dropdown
  .on("mouseenter", function() {
    $(this)
      .addClass("open");
  })
  .on("click", function() {
    $(this).removeClass("open");
  }); 

---

jsFiddle

---

CODE SNIPPET:

 var dropdown = $(".is-dropdown"); dropdown .on("mouseenter", function() { $(this) .addClass("open"); }) .on("click", function() { $(this).removeClass("open"); }); 

 .clearfix { display: block; } ul { list-style-type: none; } ul, ol { font-size: 100%; line-height: 1.5; list-style: none; } .navigation > li { padding: 16px 0px 36px 26px; float: left; position: relative; line-height: 1.5em; } .drop-down { position: absolute; top: 100px; width: 160px; z-index: 999; left: -9999px; opacity: 0; transition: top .2s ease, opacity .2s ease; } .navigation > .open .drop-down { top: 76px; left: auto; left: 16px; right: 0; opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="navigation clearfix"> <li class="active"> <a href="#">HOME</a> </li> <li class="is-dropdown"> <a href="#">pages</a> <ul class="drop-down"> <li> <a href="event.html">Event</a> </li> <li> <a href="blog.html">Blog</a> </li> <li> <a href="blog-detail-page.html">Blog-Detail</a> </li> <li> <a href="travel-info.html">Travel-Info</a> </li> <li> <a href="404-page.html">404</a> </li> </ul> </li> </ul> 

Answer 2

I am sure there are other parameters to this functionality, but here is a base level solution for you.

 $(document).ready(function() { $('.drop-down').slideUp(0); //hides all your drop downs $('.navigation li:has(> ul.drop-down)').on('mouseenter', function() { $(this).children('ul').slideDown(); }); $('.closeEm').on('click', function(e) { e.preventDefault(); // this stops the page jumpping on click $('ul.drop-down').slideUp(); }); }); 

 .clearfix { display: block; } ul { list-style-type: none; } ul, ol { font-size: 100%; line-height: 1.5; list-style: none; } .navigation > li { padding: 16px 0px 36px 26px; float: left; position: relative; line-height: 1.5em; } .navigation li { background-color: #ddd; } .drop-down { position: absolute; top: 70px; width: 160px; z-index: 999; background-color: #eee; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="navigation clearfix"> <li class="active"> <a href="#">HOME</a> </li> <li> <a href="#">pages</a> <ul class="drop-down"> <li> <a href="event.html">Event</a> </li> <li> <a href="blog.html">Blog</a> </li> <li> <a href="blog-detail-page.html">Blog-Detail</a> </li> <li> <a href="travel-info.html">Travel-Info</a> </li> <li> <a href="404-page.html">404</a> </li> </ul> </li> <li> <a href="#">pages</a> </li> <li> <a href="#">pages</a> </li> <li> <a href="#">pages</a> <li> <a href="#" class="closeEm">Close Dropdowns</a> </li> </ul> 

Answer 3

我不确定我是否了解您要尝试执行的操作，但是我想此示例将是您所需要的： http : //www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover