[Html et CSS] menu déroulant problèmatique

Bonjour à tous je suis occupé à créer mon site web et je suis tombé depuis quelques jours sur un problème que je n'arrive pas à franchir...
Je fais une table des matières (verticalement) sur la gauche de mon site. Ce sont des liens également. Pour une partie "blog" j'ai plusieurs pages et je voudrais faire un menu déroulant. Je suis penché dessus depuis un bout de temps ^^

Accueil
Profil
Blog
Page 1
Page 2
Page 3
Contact

Voici donc un petit schéma tout bete :-)

le code dans la page :

<div id="body">
<div id="navigation">
<div id="menu">
<ul id="menuDeroulant">
<li><a href="./blog de Calimajeur.html">Accueil</a></li>
<li><a href="./profil.html">Profil</a></li>
<li><a href="./blog.html">Blog</a></li>
<ul id="sousMenu">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
</ul>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</div>

Je n'ai aucune idée du code de la css correspondant vu qu'elle changeait le résultat de mes pages...Je l'ai donc supprimé en attendant une aide...

Bien à vous