Css/javascript/xhtml pour faire menu deplié

Bonjour, pour faire un menu qui se déplie au passage de la souris
j'ai crée une feuille de style:css

.conteneur
{
top:10px;
background-color:#ffffff;
position:absolute;
width:860px;
height:725px;
left: 50px;
right: 50px;
bottom: 50px;
}


.entete
{
height: 115px;
width: 860px;
left: 15px;
top: 15px;
right: 15px;
bottom: 15px;
text-align: center;
background-attachment: fixed;
background-color: red;
background-position center;
color: #ffffff;
margin: 0px;
padding: 0px;
border: thick outset #FFFFFF;
}
.gauche
{
float:left;
height:550;
width:150;
}
.menutop
{
float:left;
height: 100;
width:150;
background-color:#cccccc;
border-bottom: solid 2px #ffffff;
}

ul#menu
{
float:left;
height:450px;
overflow:scroll;
background-color:#cccccc;
width: 150px;
margin: 0;
padding: 5;

}
ul#menu ol {
text-align:left;
margin: 0;
padding-left: 20px;
padding-top:10px;
}
ul#menu li,
ul#menu a {
font-family: Comic Sans MS, Arial, MS Serif, Microsoft Sans Serif;
font-size: 10px;
color: #003399;
}
ul#menu li
{
border-bottom: solid 2px #ffffff;
line-height: 20px;
}
ul#menu ol li
{
border-bottom: none;
}
ul#menu ol li:before {
content: "- ";
}
ul#menu a {
text-decoration: none;
outline: none;
}
ul#menu a:hover {
color: #00ccff;
}
ul#menu a.active {
color: #be5028;
}

.corps
{
background-color:#cccccc;
width:707px;
height:550px;
overflow:scroll;
}
.pied
{
width:860;
height:50px;
background-color:#c0c0c0;
}


que je place comme ceci dans head:<link href="style.css" rel="stylesheet" type="text/css">
en dessous toujours dans head, je place le script :
<script type="text/javascript">
/*
Created by: Travis Beckham :: http://travisbeckham.com | http://travisbeckham.com/
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham)
*/
// Node Functions

if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}

function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}

function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}

function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onmouseover = showMenu;
a.onfocus = function(){this.blur()};
}
}

if(document.createElement) window.onload = initMenu;
</script>

et dans body:....<div class conteneur>...
<ul id="menu">
<li>nouvelle page
<ol>
<li><a href="#">rubrique</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ol>
</li>
<li>Menu Item 2
<ol>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
</ol>
</li>
<li>Menu Item 3
<ol>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
</ol>
</li>
<li>Menu Item 4
<ol>
<li><a href="#">Sub Item 4.1</a></li>
<li><a href="#">Sub Item 4.2</a></li>
<li><a href="#">Sub Item 4.3</a></li>
</ol>
</li>
<li>Menu Item 5
<ol>
<li><a href="#">Sub Item 5.1</a></li>
<li><a href="#">Sub Item 5.2</a></li>
<li><a href="#">Sub Item 5.3</a></li>
</ol>
</li>
</ul>

si je travaille en test sans feuille de style, uniquement dans head <style> ul#menu.../ul <script>....</script>
camarche, les sous-menus s'ouvrent au passage de la souris.
mais comme c'est ici, les menus sont affichés et les sous-menus en listes et sous-listes.
pourquoi et ou est mon errreur?

demain, j'essaierai de remplacer le #menu...div par .menu....class mais je risque de m'embrouiller dans script

un grand merci, c'est pour faire un menu qui se déplie

jjacco