Tutoriel Menu vertical

Je suis en train de construire mon site, je suis vraiment débutante, et la base, c'est un menu ! Quoi que je fasse, je retombe toujours sur le tuto d'Alsacréations, c'est donc le signe que c'est la référence !
Je suis donc partie de ce modèle et ai tenté de l'adapter à mes besoins....ça ne marche pas Bouuuuuuuuuuuuuuu.
En fait je parviens à faire mes menus, sous-menus et sous-sous-menus mais lorsque je relis au fichier CSS, je perds mes sous menus (ils n'apparaissent pas)...
Quelqu'un peut-il m'aider ?

Voici les scripts.
Script html

<div id="menu">
<ul>
<li class="sousmenu"><div align="left"><a href="Afrique">Afrique</a>
<ul class="niveau2">
<li><a href="Egypte">Egypte</a></li>
</ul>
</div>
</li>
<li class="sousmenu"><div align="left"><a href="Amérique">Amérique</a>
<ul class="niveau2">
<li><a href="Argentine">Argentine</a></li>
<li class="sousmenu"><a href="Brésil">Brésil</a>
<ul class="niveau3">
<li><a href="Région Nord">Région Nord</a></li>
<li><a href="Région Nord-Est (Nordeste)">Région Nord-Est (Nordeste)</a></li>
<li><a href="Région Centre-Ouest et District Fédéral">Région Centre-Ouest et District Fédéral</a></li>
<li><a href="Région Sud-Est">Région Sud-Est</a></li>
<li><a href="Région Sud">Région Sud</a></li></ul>
</ul>
</div>
</li>

<li class="sousmenu">
<div align="left"><a href="Asie">Asie</a>
<ul class="niveau2">
<li><a href="Jordanie">Jordanie</a></li>
<li><a href="Liban">Liban</a></li>
<li><a href="Syrie/">Syrie</a></li>
</ul>
</div>
</li>
<li class="sousmenu">
<div align="left"><a href="Europe">Europe</a>
<ul class="niveau2">
<li><a href="France">France</a></li>
</ul>
</div>
</li>

<li class="sousmenu">
<div align="left"><a href="Océanie">Océanie</a>
<ul class="niveau2">
<li>
<a href="Un jour peut-être...">Un jour peut-être</a></li>
</ul>
</div>
</li>
</div>
</tr>



Le scipt css

@import url("file:///C|/Documents and Settings/Claudie/Mes documents/Mes sites perso/Mes petits pas/menudiaporamascsshover.htc");
body {behavior: url( file:///C|/Documents and Settings/Claudie/Mes documents/Mes sites perso/Mes petits pas/menudiaporamascsshover.htc);
background-color: #000000;
}
div#menu {width: 100px;}

/* fond blanc pour le menu */
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 130px; border:1px solid; margin:0px; background: white}

/* fond different au survol de la souris pour les sous menu et les "basiques"*/
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #666666;}



/* Rajout d'une petite fleche pour les sous menu en survolant*/
div#menu li.sousmenu:hover {background: url(file:///C|/Documents and Settings/Claudie/Mes Documents/Mes sites perso/Mes petits pas/Images/arrows.gif) 95% 50% no-repeat;}

div#menu ul li {position: relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #BBB; width:84px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover {border-left-color: #CCCCCC;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}



Le script htc

/* fichier pour internet explorer */
body {
behavior: url(menudiaporamascsshover.htc);
}

/* On cache tous les sous menu avec la propriété display none */
div#menu ul ul {
position: absolute;
top: 0;
left: 100px;
display:none
}

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
display:block;
}/* CSS Document */




Merci vivement pour toute aide.

(Je précise que je débute et découvre tout au fil de mon avancée de création de mon site...et aussi...je suis vaguement blonde !!!)

Claudie

Bonjour,

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.


Par ailleurs, deux remarques :
- Je ne sais pas si le tutoriel sur les menus déroulants d'Alsacréations est une référence, mais ça n'est pas forcément une bonne chose. Les menus déroulants posent de sérieux problème d'accessibilité et d'ergonomie, et sont donc déconseillés. Sans parler de la difficulté à les mettre en place (constante chez les néophytes : se lancer toujours dans des choses compliquées qu'ils ne maitriseront pas, parce que « ça rend bien », au lieu de se cantonner à des choses simples mais robustes et efficaces ).
- Il me semble que le code HTML de ton menu est mal conçu (erreurs d'imbrication des balises). Le passer à la moulinette d'un validateur HTML pour déceler les erreurs.

Bonjour à toi aussi adonisos et bienvenue parmi nous !

Je vais essayer de t'aider.

1/Relire plus attentivement les règles 13 et 18

2/Editer ton post afin d'encadrer ton code dans les balises appropriées