Menu horizontal et vertical déroulante correctement placé.

bonjour à tous,
j'ai suivi les deux tutoriels mis en place sur le site sur les menus horizontal et vertical déroulant avec javascript.

design : header + 3 colonnes
j'ai réussi à placer correctement le menu de gauche vertical déroulant par contre j'ai un problème quand je place ce meme menu à droite dans la colonne.
le centre de ma page ce retrouve en dessous.
pourriez vous m'eclaircir, je pense qu'il faut le position différemment.

katsumi_ débutante css
merci

<style type="text/css">
body {
	margin:10px 0;
	padding: 0;
	text-align:center;
	background: url();
	font: 0.9em "Verdana", helvetica, sans-serif;
	}

#container
{
width: 780px;
margin: 10px auto;
background-color: #CC9933;
color: #333;
border: 1px solid black;
line-height: 130%;
}

#top
{
padding: .5em;
background: #fff url(images/header.png) no-repeat;
height: 188px;
border-bottom: 1px solid black;
}

#top h1
{
padding: 0;
margin: 0;
}
*/menu du header */
div#menu ul {
position:fixed;
width: 100%; /* précision pour Opera */
}

div#menu li { float: left;list-style-type: none;} /* on aligne les listes sur la gauche */

div#menu a {
     margin: 0 2px;
     width: 100px; /* on définit la taille du bouton de menu */
     height: 20px;
     float: left;
     display: block;
     text-align: center;
     border: 1px solid gray;
     text-decoration: none;
     color: #000;
     background: #fff;
     }
	
div#menu a:hover {
     background: #ccc;
     border: 1px solid gray;
     }

div#menu a:active {
     background: gray;
     border: 1px solid gray;
     color: #fff;
     }

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;

}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;

}

#content
{
margin-left: 150px;
border-left: 1px solid black;
margin-right: 150px;
border-right: 1px solid black;
padding: 1em;
max-width: 36em;
background-color: #FFF;
text-align: left;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #CC9933;
border-top: 1px solid black;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu_vertical {
 /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu_vertical {
width: 8em;
}
#menu_vertical dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid black;
background: #fff;
}
#menu_vertical dd {
border: 1px solid gray;
}
#menu_vertical li {
text-align: center;
background: #fff;
}
#menu_vertical li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu_vertical li a:hover, #menu dt a:hover {
background: #eee;
}


</style>

me serais je mal exprimé ?

bonjour Katsumi

Ton fichier CSS ne suffit pas, il faudrait plutot un lien versl page pour pouvoir auditer la structure HTML

Quand aux menu déroulants, il est vrai qu'ils posent pas mal de problème, mais la raison ne tiens pas au principe du menu déroulant mais plutôt à la qualité de menu lui-même.

Comme généralement le "déroulement" est géré par javascript à cause des limitations hover d'IE, il faut reconnaitre que l'on se trouve souvent face à des usines à gaz, partiellement utilisables et accessibles.

Mais il n'à pas de fatalité à ça, faire un menu déroulant correct, accessible tant à la souris qu'au clavier et équipé des solutions alternatives adh'oc ne pose pas de problème particulier, même si c'est rare, mais les bons développements EcmScripts sont également rares...

Et pourquoi dire qu"ils sont le symptôme d'une conception défaillante ?
La conception défaillante serait de vouloir mettre trops de liens, comme des sous-rubriques de sous-rubriques, mais ça n'à rien à voir avec le fait que le menu soit déroulant ou pas...

Non ?

je le sais bien que les menus déroulants ce n'est pas trop, mais mon ami lui veut des menus déroulants.
je met en ligne dès que possible, merci pour vos réponses.