Question

still trying to figure out jQuery and I need some help with a sidebar list.

I am editing this after trying some stuff.

I am trying to have the submenu hidden until a specific list item is moused over, then another menu appears to the side of the sidebar and you are able to mouse over those selections. I am halfway there but when you mouseout it disappears before you can mouseover any of the items. I will add hoverIntent but I do not think that is the problem as I need that whole hidden block to also be a trigger to show that element. I tried Steerpikes solution below but it caused the entire main list to disappear after mouse out.

Here is the structure now:

<ul>
<li>Always Showing Element</li>
<li class="trigger">Title that triggers Submenu
<ul>
<li>
Hidden Menu
</li>
</ul>
</li>
</ul>

and the script

$('li.trigger ul').hide();
 $('li.trigger').hover(function() {
$('li.trigger ul').show();
},
function() {
      $('li.trigger ul').hide();
});

So how can I keep it showing while my mouse are over the li.trigger ul li elementes?

Thanks for the help with this!

Nevermind… this works now, I just had the positioning off but now it overlaps a bit and with hoverintent adding a little delay there is no problem.

Answer 1

The follwing should work. I just wrote something similar 3 minutes ago 🙂

<ul id='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>

$('#menu li').hover(function() {
        $(this).find('ul').show();
    },
    function() {
      $(this).find('ul').hide();
});

Remember that hover() takes two arguments – what happens when you mouse in and what happens when you mouse out.