JQuery Drop Down menu system

[melting_dog]

Hi all,

Im constructing a JQuery drop down menu system and have come accross two problems. The first is that when the page first loads the submenu is visable (but works properly when i roll over it) and the 2nd is that I cannot seem to repeat the process for the the other items in the navigation menu - it only works for the first one.

 

Here is my code:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

 

<script type="text/javascript">

$(document).ready(function(){

 

$(function() {

    $('#nav li').hover(function() {

          $('div.subMenu', this).show(400);

      }, function() {

          $('div.subMenu', this).hide(400);

      });

});  

 

$(function() {

    $('#nav li').hover(function() {

          $('div.subMenu2', this).show(400);

      }, function() {

          $('div.subMenu2', this).hide(400);

      });

});

 

});

</script> 

 

 

 

<div id="nav">

<ul>

    <li><a href="index.php"><img src="images/homeBtn.gif" alt="Home"/></a>

        <div class="subMenu">Return to the home page.</div></li>

      <li><a href="about.php"><img src="images/aboutBtn.gif" alt="About"/></a></li>

        <div class="subMenu2">Learn more about the SDM&A.</div></li>

</div>

 

Any help would be greatly appreciated!

[melting_dog]

ok so i solved the first issue. but the repeating issue is still a problem...any help would be appreciated