I have a piece of script. What I want to happen is when somebody hovers over the top navigation, the corresponding sub navigation appears & all the other disappear. Here's what I've got:
HTML Code:
<ul class="topNav">
   <li><a href="<?php bloginfo('url'); ?>" onMouseOver="subNav('1');">HOME</a></li>
   <li><a href="<?php bloginfo('url'); ?>/forums" onMouseOver="subNav('2');">FORUMS</a></li>
   <li><a href="<?php bloginfo('url'); ?>/?cat=3" onMouseOver="subNav('3');">SHOW ARCHIVE</a></li>
   <li><a href="<?php bloginfo('url'); ?>/?cat=-3" onMouseOver="subNav('4');">FTS NEWS</a></li>
   <li><a href="<?php bloginfo('url'); ?>/?page_id=6" onMouseOver="subNav('5');">ABOUT</a></li>
   <li><a href="<?php bloginfo('url'); ?>/?page_id=3" onMouseOver="subNav('6');">SUBSCRIBE</a></li>
  </ul>
  <div class="subNav">
   <div id="1" style="display:block;">
    <p>Fear The Spork</p>
   </div>
   <div id="2" style="display:none;">
    <p><a href="<?php bloginfo('url'); ?>/forums">View Forums</a> | <a href="<?php bloginfo('url'); ?>/forums/register.php">Sign Up</a></p>
   </div>
   <div id="3" style="display:none;">
    <p><a href="<?php bloginfo('url'); ?>?cat=3">View Archive</a> | <a href="<?php bloginfo('url'); ?>/forums/**path to forum**">Discuss Shows</a></p>
   </div>
   <div id="4" style="display:none;">
    <p><a href="<?php bloginfo('url'); ?>?cat=1">News Archive</a> | <a href="http://twitter.com/fearthesporkradio">Twitter</a> | <a href="http://facebook.com/fearthesporkradio">Facebook</a></p>
   </div>
   <div id="5" style="display:none;">
    <p><a href="<?php bloginfo('url'); ?>?page_id=6">About</a> | <a href="<?php bloginfo('url'); ?>?page_id=8">Contact</a> | <a href="<?php bloginfo('url'); ?>?page_id=11">Promote</a></p>
   </div>
   <div id="6" style="display:none;">
    <p><a href="<?php bloginfo('url'); ?>?page_id=13">Subscription Info</a> | <a href="http://feeds.feedburner.com/fts">RSS feed</a> | <a href="itpc://feeds.feedburner.com/fts">iTunes</a></p>
   </div>
  </div>