navigation using lists

Please can anyone help? How do I get a sub-navigation list (the whole list) to become visible when the user hovers over a main-navigation list item (LI)? I am trying to use JavaScript and CSS and I really do not want to admit defeat and use a menu-generating piece of software! This is the code that doesn’t work:

<li class=”mainnav”><span onmouseover=”style=ul.subnav { display: inline; }”>Item One</span></li>

This is the very simple stylesheet I am using:

<style type=”text/css”>
<!–
ul.mainnav { display: inline; }
li.mainnav { display: inline; }
ul.subnav { display: none; }
li.subnav { display: inline; }
–>
</style>

Also in #JavaScript _↴