CodingForums.com - Menu with 3 rows

Hi all,
I am new to the forum and not very competent in programming.

I would like to ask your help for something I cannot implement: I have the following javascript code for my menu.

Code:

<style type="text/css"> 

body {

        font: 10px normal Verdana, Arial, Helvetica, sans-serif;

        margin: 0;

        padding: 0;

}

.container {

   float:left;

   width:100%;

   background:url(IMG/topnav2.jpg);

   margin: 0 auto;

}

ul#topnav {

   float:left;

   list-style:none;

   margin:0;

   padding:0;

   position:relative;

   left:50%;

   text-align:center;

}

ul#topnav li {

   display:block;

   float:left;

   margin:0;

   padding:0;

   position:relative;

   right:50%;

   border-right: 1px solid #555;

}

ul#topnav li a {

   display:block;

   padding: 8px 16px;

   color:#f0f0f0;

   text-decoration:none;

}

ul#topnav li:hover {background::url(IMG/topnav1.jpg);}

ul#topnav li span {

        float: left;

        padding: 8px 0;

        position:fixed;

        left: 0; top:29px;

        display: none;

        width: 100%;

        background:url(IMG/topnav180.jpg);

        border-bottom: 1px solid #69430F;

        color: #fff;

}



ul#topnav li:hover span { display: block; }

ul#topnav li span a { display: inline; }

ul#topnav li span a:hover {text-decoration:underline;}



</style>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() {

        

$("ul#topnav li").hover(function() { //Hover over event on list item

        $(this).css({ 'background' : ' url(IMG/topnav1.jpg) repeat-x'}); //Add background color + image on hovered list item

        $(this).find("span").show(); //Show the subnav

} , function() { //on hover out...

        $(this).css({ 'background' : 'none'}); //Ditch the background

        $(this).find("span").hide(); //Hide the subnav

});

        

});



</script>

Then there is the code in the <body> section:

Code:

<div class="container">        

    <ul id="topnav"> 

        <li><a href="home.html" target="_top">HOME</a></li> 

        <li> 

            <a href="company.html" target="_top">ABOUT THE COMPANY</a> 

            <span> 

                <a href="history.html" target="_top">HISTORY</a> |

                <a href="mission.html" target="_top">MISSION - OBJECTIVES</a>  

            </span> 

</li> 

        <li> 

            <a href="products.html" target="_top">PRODUCTS</a> 

            <span> 

                <a href="PRODUCT1.html" target="_top">PRODUCT1</a> |

                <a href="PRODUCT2.html" target="_top">PRODUCT2</a> 

             

            </span>

    </li> 

    </ul> 

        

</div>

So far it works great.
http://insidesignstudio.com/IMG/MENU1.jpg
Now I want to add a submenu under the "PRODUCT1", this means a third line of menu, where I can list SUB-PRODUCT1, ........
http://insidesignstudio.com/IMG/menu2.jpg
Can you help me with the code?
Thank you very much.
Best Regards
L.