hover and document.write

hover and document.write

Hello,
     So what i am trying to do is have a <ul> of <li>'s written to my html document on hover of a specific <li>
Basically on hover of a Navigation item, the js should write the subNav underneath.

The reason i want to use document.write is so that there can be multiple different sub items that appear if a menu item has sub categories.

Here is my code, if you need a better explanation please ask asap!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    </head>
   
    <body>
           

       
        <div id="subnavContainer" style="background:#ff0000; color:#fff; ">
            <br />
            <br />
                    &nbsp;&nbsp;
                <ul style="cursor: pointer;">
                <li style="display:inline;" id="gn-home"><a>Home</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-about"><a>About</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-groups">Groups</li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-media">Media</li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-outreach">Outreach</li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-resources">Resources</li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-sponsprs">Sponsors</li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-blog">Blog</li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-calendar">Calendar</li>&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="display:inline;" id="gn-forums">Forums</li>&nbsp;&nbsp;&nbsp;&nbsp;
                </ul>
                    &nbsp;&nbsp;
            <br />
            <br />
           

             <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
             <script type="text/javascript">
                $("li#gn-home").hover(
                       
                    function() {
                        $(this).document.write('<ul id="subnavList" style="background:#000; color:#fff; padding:5px 19px 5px 19px; font-family:Arial,Helvetica,sans-serif; font-size:0.827em;"> <li style="display: inline;">&nbsp;&nbsp;FIRST &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; </li> <li style="display: inline;">Our Team &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; </li> <li style="display: inline;"> Our Competitions &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; </li> <li style="display: inline;"> Games &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; </li><li style="display: inline;"> Our Site &nbsp;&nbsp;</li></ul>');
                    },
                    function() {
                        $(this).document.write(' this is nothing! ');
                }
            );
             
             </script>
            <br />
            <br />
        </div>   
   
   
   
    </body>
   
</html>   


Thank you in advance and I hope you can help me write code that has a corresponding subNav that appears specific to a main Nav item that is being hover on.Then on hover off nothing is shown. Until the user hovers over another main item that has a specific subNav.

Regards and Thanks,
                          Irfan M.
                        theirf@gmail.com