Menu déroulant style comment ça marche

Bonsoir à tous.
Je me suis lancé dans la création des menus déroulants et j'ai voulu faire celui de commentcamarche et j'ai plus ou moins réussi mon coup en associant JavaScript et CSS.

Tout va pour le mieux mais accéder aux sous menus est un vrai parcours de combattant. Voici mon code

1 - HTML

<table width="100%"><tr><td style="display:inline-block; white-space:nowrap;">
<ul id="menu" style="width:100%;">
   <li><a href="#">Accueil</a></li>
  <li onMouseOver="actualites_over()" onMouseOut="actualites_out()"><a href="#">Actualités</a></li>
  <li onMouseOver="tutoriels_over()" onMouseOut="tutoriels_out()"><a href="#">Tutoriels</a></li>
</ul>
</td></tr></table>

<table width="100%"><tr><td style="display:inline-block; white-space:nowrap;">
<ul id="sous-menu-actualites" onMouseOver="actualites_over()" onMouseOut="actualites_out()">
  <li class="categorie">Actualités = &gt;</li>
  <li><a href="#">Toute l'actualités</a></li>
  <li class="bar">&nbsp;</li>
  <li><a href="#">Dévéloppement web</a></li>
  <li><a href=#">Hight-tech</a></li>
</ul>
<ul id="sous-menu-tutoriels" onMouseOver="tutoriels_over()" onMouseOut="tutoriels_out()">
  <li class="categorie">Tutoriels = &gt;</li>
  <li><a href="#">Développement web</a></li>
  <li><a href="#">Programmation</a></li>
  <li><a href=#">Infographie</a></li>
  <li class="bar">&nbsp;</li>
  <li><a href="#">Astuces</a></li>
</ul>
</td></tr></table>

2 - CSS

#menu, #menu ul{padding:0; margin:0; list-style:none; text-align:left;}		#menu li{display:inline-block; position:relative; width:auto;}

//#menu ul{position:absolute; max-height:0; left:-15%; right:-15%;  overflow:hidden; -moz-transition: .8s all .3s; -webkit-transition: .8s all .3s; transition: .8s all .3s;}

/* background des liens menus */
#menu li{background-color:lightblue;	background-image: -moz-linear-gradient(top, #729EBF 0%, lightblue 50%);	background-image: -webkit-linear-gradient(top, #729EBF 0%, lightblue 50%);	background-image:linear-gradient(to bottom, #729EBF 0%, lightblue 50%);}

/* background des liens menus au survol */
#menu li:hover, #menu li:active, #menu li:focus{background:#729EBF;}

/* les a href */
#menu a{text-decoration:none; display:block; padding:10px 35.5px; color:#fff; font-family:tahoma;}		

/************************************************************************************************/

#sous-menu:hover #sous-menu-actualites, #sous-menu:hover #sous-menu-tutoriels{display:block;  -moz-transition: .8s all .3s; -webkit-transition: .8s all .3s; transition: .8s all .3s; -0-transition: .8s all .3s; transition: .8s all .3s;}

#sous-menu-actualites:hover, #sous-menu-tutoriels:hover{display:block; -moz-transition: .8s all .3s; -webkit-transition: .8s all .3s; transition: .8s all .3s; -0-transition: .8s all .3s; transition: .8s all .3s;}

#sous-menu-actualites, #sous-menu-tutoriels{padding-left:5%; margin:0; list-style:none; display:none;  -moz-transition: .8s all .3s; -webkit-transition: .8s all .3s; transition: .8s all .3s; -0-transition: .8s all .3s; transition: .8s all .3s;}

#sous-menu-actualites li, #sous-menu-tutoriels li{display:inline-block; position:relative; width:auto;}

#sous-menu-actualites li.bar, #sous-menu-tutoriels li.bar{background:cornflowerblue;}

#sous-menu-actualites li a, #sous-menu-tutoriels li a{text-decoration:none; padding:4px 10px; color:#000;}

#sous-menu-actualites li a:hover, #sous-menu-tutoriels li a:hover{text-decoration:underline; color:#729EBF;}

3 - JavaScript

function actualites_over() {document.getElementById('sous-menu-actualites').style.display='block'; }
function actualites_out() {document.getElementById('sous-menu-actualites').style.display='none'; }

function tutoriels_over() {document.getElementById('sous-menu-tutoriels').style.display='block'; }
function tutoriels_out() {document.getElementById('sous-menu-tutoriels').style.display='none'; }

Merci d'avance pour vos réponses