CSS/Jquery to show hide submenu

Question

Hello, 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.

Answer 2

You may find it useful to make your root element a block level element, and perform your event handling in that context.

Answer 3

I would consider using CSS to do this feature. Since this is for a menu, you want it to be very accessible. Users that have javascript turned off (think mobile browsers too) or anyone using a screen reader will not be able to use your menu.

Try viewing: http://www.htmldog.com/articles/suckerfish/dropdowns/

It is a CSS solution for multi-dropdown menus that should work out great.

Answer 4

actually i wanna sub menu effects by jscripts like as coded and designed from flash .if it is posible would you mind tel me this plz wid a example!!! (blackhand)