Show children gist

custom.js

From HTML 
--------


<section id="main" role="main">
  <p>We spend our time</p>
  <ul role="navigation">
    <li><a class="websites" href="#" target="_blank" class="first" >making websites</a>
      <ul style="display: none;">
        <li><a href="#">website #1</a></li>
        <li><a href="#">website #2</a></li>
        <li><a href="#">website #3</a></li>
        <li><a href="#">view all sites</a></li>                
      </ul>
    </li>
    <li><a class="tweeting" href="http://www.twitter.com/tagell" target="_blank" >tweeting</a>
      <ul style="display: none;">
        <li><a href="#">latest tweet</a></li>
        <li><a href="#">2nd latest tweet</a></li>
        <li><a href="#">3rd latest tweet</a></li>
        <li><a href="#">view all tweets</a></li>                
      </ul>
    </li>
    <li><a class="blogging" href="http://paultagell.com" target="_blank" >writing our blog</a>
      <ul style="display: none;">
        <li><a href="#">title #1</a></li>
        <li><a href="#">title #2</a></li>
        <li><a href="#">title #3</a></li>
        <li><a href="#">view all entries</a></li>                
      </ul>
    </li>
    
  </ul>
</section>


------------

from custom.js

-----------

window.onload = function(){ $("section#main > ul").hide(); }

// when the page is ready


$(document).ready(function(){   
        
  $("p").mouseover(function () {
      $("section#main > ul").toggle("slow");
      });
  
  $("li").mouseover(function () {
      $("this").next("ul").show("slow");
      });

  
 });

On the first mouseover (of the p element) I want to reveal the first level of li's. Eg. "Making Websites".

Then, when mousing over "Making websites" I want the child ul li's within that element to display, but not the others.

Any suggestions appreciated.