Dérouler menu sur la droite en css ???

Bonjour,


J'aurais besoin d'un petit coup de pouce sur l'agencement de mon menu en CSS


Deux réponses peuvent me convenir:


1) SOIT M'EXPLIQUER COMMENT DEROULER SUR LE COTE DROIT LES LISTES A PUCES DE MON MENU VERTICAL
(au lieu de les dérouler verticalement) , je précise que ce bloc menu div, s'affiche bien dans mes toutes
mes pages sas décaler le reste.


Ci-joint, le Css du menu :



#menu
{ float: left; width: 15.5%; white-space: nowrap; background-image:url(""); background-repeat: no-repeat;
border: 3px solid white;}

#menu, #menu ul {padding : 0; margin : 0; list-style : none; line-height : 21px; text-align : center;}

#menu a {display : block; padding : 0; background : #000; color : #fff; text-decoration : none; width : 190px;}

#menu p { display : block; padding : 0; background : #000; color : #fff; text-decoration : none; width : 190px;
}

#menu a:hover {color : #000; background : #fff; /* Blanc*/ }

#menu li {float : left; border-right : 1px solid #fff; }

html>body #menu li { border-right: 1px solid transparent ; }

#menu li ul { position: absolute; width: 190px; left: -999em; }

#menu li ul li { border-top : 1px solid #fff; }

html>body #menu li ul li { border-top : 1px solid transparent;}

#menu li ul ul { margin : -22px 0 0 190px ; border-left: 1px solid #fff ;}

html>body #menu li ul ul { border-left : 1px solid transparent ; }

#menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em;}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{left: auto; min-height: 0;}



2) SOIT M'EXPLIQUER COMMENT PLACER LE MENU SUIVANT (qui lui se déroule très bien) en le faisant flotter
sur le côté droit sans qu'il décale vers le bas mon bloc div central (celui du contenu de mes pages)
J'envoie le CSS désign complet au cas ou vous auriez d'autres conseils pour améliorer le design et corriger
éventuellement des erreurs , il doit sans doute y en avoir, même si pour le moment l'ensemble
s'affiche bien dans IE et firefox. Je vous avoue que je ne sais pas trop si le site doit être de type fixe, avec
rien sur les côtés ou extensible ? , chose que je ne maîtrise pas encore au niveau des placements DIV ?
Donc, ce que vous voyez, est une sorte d'hésitation entre les deux, j'ai un corps central de type fix, mais
je veux mon menu flottant sur la droite...........



body
{
font-family:Verdana; margin: 10px 10px 10px 10px; background-image:url("images/antartic.jpg");border: 3px solid white;}

/* ENTETE */
#en_tete
{width: 760px; height: 90px; margin-right: auto;margin-left: auto;margin-bottom: 10px;text-align: center;
background-image:url("images/banniere1noambonnandcombis.jpg"); background-repeat: no-repeat;}

#entete a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: white;
}



/* MENU DE GAUCHE */

ul ul {display: none; /* Rendre éléments visibles que lors du survol souris*/
position: absolute; left: 144px; top: -1px; margin:0px; padding: 0px;
border: 1px solid #B0B0B0; /* bordure compatible avec IE6 au lieu d'utiliser 1px solid grey*/}



li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}

li:hover {background-color: #FFFF70;}
li:hover ul.niveau2, li li:hover ul.niveau3 {display: block}
li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat;
border-bottom: 1px solid #B0B0B0;} /* bordure compatible avec IE6 au lieu d'utiliser 1px solid grey*/

li:hover ul.niveau2, li li:hover ul.niveau3 {display:block;} /* Rendre éléments visibles que lors du survol souris*/

/*Pour IE6*/

li:hover, li.sfhover {background-color: #FFFF70;}
li:hover ul.niveau2, li li:hover ul.niveau3, li.sfhover ul.niveau2, li li.sfhover ul.niveau3 {display: block}
li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}

#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
#monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
#monmenu li a {text-decoration:none;}
#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
#monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}




/* Le corps de la page */

#corps
{
margin:0 20% 0 20% ;
padding: 30px;


color: black;
background-image:url("images/partitionfondpourlecorps.jpg");
border: 2px solid red;
overflow: visible;
}

#corps a:hover
{
background-color: #B3B3B3;
color: black;
}



#corps h1
{
color: black;
text-align: center;
font-family: Georgia, "Times New Roman", Arial, serif;
}

#corps h2
{
height: 30px;
background-image: url("");
background-repeat: no-repeat;
padding-left: 30px;
color: black;
text-align: left;
font-family: Georgia, "Times New Roman", Arial, serif;
}

#corps p
{
font-size: 20px;
text-indent: 60px;
color: black;
text-align: justify;
font-family: Georgia, "Times New Roman", Arial, serif;
}

a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: blue;
font-family: Georgia, "Times New Roman", Arial, serif;
}



/* CSS DE LA PAGE ACCUEIL*/

.linotebleue
{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
list-style-type: none;
background-image:url("images/notedemusique.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.linotebleue h2
{
color: blue;
}

.liapprendrepiano {
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
list-style-type: none;
background-image:url("images/livredeconnaissance.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}

.lisalondemusique{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: black;
list-style-type: none;
background-image:url("images/musiquephonographes.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.lisalondemusique h1
{
color: purple;
}

.litelechargementpartitions{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: black;
list-style-type: none;
background-image:url("images/musiquepartition.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.litelechargementpartitions h1
{
color: black;
}

.titreh2
{
margin-left: 70px;
}

.imageflottante
{
float: left;
margin-left: 0px;
}

.notedemusique
{
border: none;
}

.livredeconnaissance
{
border: none;
}

/* CSS DE LA PAGE INDEX*/
.drapeau
{
margin-right: 20px;
border-style: none;
}

/* PIED DE PAGE */

#pied_de_page
{
width: 760px;
height: 90px;
padding: 0px;
position: absolute;
left: 240px;
margin-top: 10px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image:url("images/bannieredubas.jpg");
background-repeat: repeat-x;
border: 2px solid black;
}

#sous_pied_de_page
{
width: 760px;
height: 20px;
position: absolute;
left: 240px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("");
background-repeat: repeat-x;
border: 2px solid black;
}

#sous_pied_de_page a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: white;
}

#sous_pied_de_page a:hover
{
background-color: #B3B3B3;
color: black;
}