Menu header

Bonjour,
Mon header en html se présente comme suit:

<div id="head">
<div id="paysage">
<div id="menu">
<ul>


<div>
<ul id="manu">
<li><a href="#">Actualite</a></li>
<li><a href="#">Musique</a></li>
<li><a href="#">Videos</a></li>
<li>
<a href="#">Rubriques</a>
<ul>
<li><a href="#">Actualite</a></li>
<li><a href="#">Bonus</a></li>
<li><a href="#">Creativite</a></li>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Musique</a></li>
<li><a href="#">Videos</a></li>


</ul>

<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>


</li>
</ul>
</div>
</ul>


</div>

Tous s'affiche correctement sur le site mais lorsque je zoome la page ou que je la retrecie, les éléments <ul> se posent les une sur les autres ce qui rend la comprehension quasi nulle. Comment je peux faire pour que les éléments restent figer sur le header?