悬停时保持子菜单

Question

I am trying to keep my sub-menu appearing when I hover onto it. Currently it disappears when I hover off Locations .

My Demo: http://jsfiddle.net/269yqavo/

Here is my code:

 $('.main a.primary').hover(function(e){ e.preventDefault(); $(this).next().toggle(); }).hover(); 

 .sub-menu {display:none;background:#ccc} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul class="sf-menu"> <li class="main"> <a href="" class="primary">Locations</a> <ul class="sub-menu"> <li><a href="/location/athina/" title= "View all posts in Athina">Athina</a></li> <li><a href="/location/beirut/" title= "View all posts in Beirut">Beirut</a></li> </ul> </li> </ul> 

Answer 1

Here's a solution without JS at all. Simply show the sub menu whenever the container is hovered.

http://jsfiddle.net/269yqavo/1/

.sub-menu {
    display:none;
    background:#ccc
}

.main:hover .sub-menu {
    display: block;
}

Answer 2

Why not do like this? The hover function should be used differently. The event should be bound on the parent.

 $('.main a.primary').parent().hover(function(e){ $(this).find("a").next().show(); }, function () { $(this).find("a").next().hide(); }); 

 .sub-menu {display: none; background: #ccc} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul class="sf-menu"> <li class="main"> <a href="" class="primary">Locations</a> <ul class="sub-menu"> <li><a href="/location/athina/" title= "View all posts in Athina">Athina</a></li> <li><a href="/location/beirut/" title= "View all posts in Beirut">Beirut</a></li> </ul> </li> </ul> 

And instead of using JS, you can use CSS alone:

 .sub-menu { display: none; background: #ccc } .main:hover .sub-menu { display: block; } 

 <ul class="sf-menu"> <li class="main"> <a href="" class="primary">Locations</a> <ul class="sub-menu"> <li><a href="/location/athina/" title= "View all posts in Athina">Athina</a></li> <li><a href="/location/beirut/" title= "View all posts in Beirut">Beirut</a></li> </ul> </li> </ul> 

Answer 3

Why u do it by simple css?

HTML

<ul class="sf-menu">
    <li class="main">
      <a href="" class="primary">Locations</a>

      <ul class="sub-menu">
        <li><a href="/location/athina/" title=
        "View all posts in Athina">Athina</a></li>

        <li><a href="/location/beirut/" title=
        "View all posts in Beirut">Beirut</a></li>

      </ul>
    </li>
  </ul>

CSS

.sub-menu {display:none;background:#ccc}

.main:hover .sub-menu{
    display:block
}

Simple logic here when u do hover on main class sub-menu will show

JSFIDDLE 1

OR

$('.sf-menu').children().hover(function(e){
    $(this).find("a").next().show();
}, function () {
    $(this).find("a").next().hide();
});

JSFIDDLE 2