title: CSS/Jquery to show hide submenu
body: <p>still trying to figure out jQuery and I need some help with a sidebar list. </p>
  
  <p>I am editing this after trying some stuff.</p>
  
  <p>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.  </p>
  
  <p>Here is the structure now:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;Always Showing Element&lt;/li&gt;
  &lt;li class="trigger"&gt;Title that triggers Submenu
  &lt;ul&gt;
  &lt;li&gt;
  Hidden Menu
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the script</p>
  
  <pre><code>$('li.trigger ul').hide();
   $('li.trigger').hover(function() {
  $('li.trigger ul').show();
  },
  function() {
        $('li.trigger ul').hide();
  });
  </code></pre>
  
  <p>So how can I keep it showing while my mouse are over the li.trigger ul li elementes?</p>
  
  <p>Thanks for the help with this!</p>
  
  <p>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.</p>