Salut tout le monde.
 
Voilà je fais un blog auquel je voudrais ajouter un menu déroulant (avant toute chose).
 
(Voilà je met ici le résultat après la solution apporté sur ce forum)
 

 
Malheureusement je n'arrive pas à le mettre à gauche j'ai essayé de trafiquer un peu le CSS (je n'y connais rien en CSS) mais pas moyen de mettre la main ce ce qui agit sur ce menu.
 
Voilà ce que je met en Html
 
<div id="menu" style="margin-left: 150px;">
<ul class="niveau1">
<li> <a href="lien">menu 1</a> </li>
<li class="sousmenu , plop"> <a href="lien">menu 2</a>  
<ul class="niveau2">
<li> <a href="lien">Sous menu 2.1</a> </li>
<li> <a href="lien">Sous menu 2.2</a> </li>
</ul>
</li>
<li> <a href="lien">menu 3</a> </li>
<li class="sousmenu , plop"> <a href="lien">menu 4</a>  
<ul class="niveau2">
<li class="sousmenu"> <a href="lien">Le sous menu 4.1</a>  
<ul class="niveau3">
<li> <a href="lien">Sous sous menu 4.1.1</a> </li>
<li> <a href="lien">Sous sous menu 4.1.2</a> </li>
<li> <a href="lien">Sous sous menu 4.1.3</a> </li>
</ul>
</li>
<li> <a href="lien">Le sous menu 4.2</a> </li>
</ul>
</li>
<li> <a href="lien">menu 5</a> </li>
</ul>
</div>
 
 
Et ici le CSS
 
 
 
#global {width: 950px; background-color: transparent; margin: 0 auto 20px;}
 
#cl_0_0 {margin: 0; padding: 0; width: 100%;}
#cl_1_0 {float: left; width: 600px; margin: 0; margin-right: 18px; padding: 0px 10px 0 10px;}
#cl_1_1 {float: left; width: 300px; padding: 0px 0 0 0; margin: 0 5px; border-left: 1px solid #e9e3cb;}
#cl_1_0 ul {padding-left: 10px; /margin-left: 0;}
#cl_2_0 {/line-height: 15px;}
 
 
.GcheTexte{float:left; margin:3px;}
.DrteTexte{float:right; margin:3px;}
.CtreTexte{margin:3px auto; display:block;}
.hitcitation {font-style:italic;text-align:justify;padding:5px 20px;background-color:#eee;}
.hitencart {border:1px solid black;text-align:justify;font-weight:bold;margin:5px 0px;padding:5px 5px;}
.hitimportant {font-weight:bold;color:red;font-weight:bold;font-size:120%;}
.hitperso1 {font-style:italic;}
.hitperso2 {font-weight:bold;}
 
#header {min-height: 150px; margin-bottom: 0;}/*----------------------------------------------------------------------------*/
/* Variation                                                                  */
/*----------------------------------------------------------------------------*/
body {margin:0px; padding:0px; background-color: #FFFDEA; font-family: 'Arial', Verdana, Helvetica; font-size: 12px; color:#464032; line-height: 18px;}
h1 {color: #CCCCCC; font-size: 20px;}
h2 {color: #CCCCCC; font-size: 15px;}
h3 {color: #CCCCCC; font-size: 12px;}
a {text-decoration: none; color:#A7430F; font-size:100%;}
a:hover {text-decoration: underline; color:#A7430F;}
legend {color:#66CC33; padding-left:5px; padding-right:5px;}
li {list-style-type:none;}
img {border:0px none;}
input {border:solid 1px #dedede; font-size:100%; background-color:#FFF; color:#000000; height: 18px;}
.button {background-color: #ac9a79; color: #fff; height: 100%; padding: 2px}
 
 
/* ------------------entete ---------------------*/
 
#top {font-family: 'Georgia'; padding:0px; color:#5E4E38; font-size: 14px; text-align: left; padding-top: 40px; padding-left: 20px; font-weight: normal; font-style: italic; line-height: 23px; /line-height: 25px;}
#top h1 {padding:0px; margin:0px; color:#574040;}
.topLien {text-decoration:none; color:#574040;}
.topLien:hover {text-decoration:underline; color:#574040;}
#top a {color: #A83A01; font-size: 30px; text-decoration: none; font-weight: normal; font-style: normal;}
#top img {margin: 0 auto; padding: 0px;}
 
/*-------------------module--------------------------*/
 
.box {margin:0px; margin-bottom: 20px;}
.box a {color: #464032; text-decoration: none;}
.box a:hover {text-decoration: underline; color: #8A8A8A;}
.box h2 {font-size: 18px; margin: 0px; padding: 10px; background-color: #E9E3CB; color:#464032; font-weight: normal; line-height: 20px;}
.box-titre {padding:0px;}
.box-footer {display:none;}
.box-content {overflow: hidden; padding: 10px 5px; color:#787878;}
.box-content p {margin:5px 0px; padding:0px; color:#787878;}
.box-content ul {margin:5px 0px; padding:0px; color:#787878;}
.box-content li {list-style: none; color:#787878; margin:5px 0; padding:0px;}
.listAll{display:block; text-align:right;}
.text li, .lien li, .articlerecent li, .commentrecent li, .categorie li {min-height: 20px; padding: 5px 0 0 0px; border-bottom: 1px dotted #E5E0C6; line-height: 14px; /line-height: 15px;}
.commentrecent li {min-height: 35px;}
.imgAndText li {width: 150px; float: left; height: 100px;}
.recherche .box-content, .newsletter .box-content {text-align: center;}
.pub h2 {display: none;}
.pub .box-content {margin: 0 0 0 0px;}
.pub {border: 0; background-color: transparent;}
.article_navigation {line-height: 14px;}
 
/*------------------- Articles ----------------------------------*/
 
.article, .page {margin-top:0px; color:#464032; text-align: justify; margin-bottom: 25px; padding: 10px;}
.article p, .page p {margin:0px;}
.contenuArticle, .pageContent {padding: 10px;}
.afterArticle, .afterPage {font-size: 12px; color:#464032; margin-top: 15px; font-weight: normal; font-style: normal; line-height: 15px;}
.afterPage {background-color: transparent;}
.plusExtrait a, .afterArticle a {font-size: 12px; text-decoration: none; color:#A7430F; padding: 3px; font-weight: bold; font-style: normal;}
.plusExtrait a:hover, .afterArticle a:hover {text-decoration: underline; color: #A7430F;}
.afterArticle .separator, .plusExtrait .separator {display: none;}
.plusExtrait br, .afterArticle br {margin: 0; padding: 0;}
 
 
.spanRecommend .facebook {padding: 0 8px;}
.before_articles {display: none;}
.beforeArticle, .beforePage {padding: 5px 0px; width:600px; background-color: #E9E3CB; color:#464032; text-align: right; margin: 10px 0 10px 0; display: block; font-size: 13px; font-style: normal; font-weight: bold; line-height: 15px;}
.beforePage {padding: 0; background-color: transparent;}
.beforeArticle .date span, .beforeArticle .separator {display: none;}
.beforeArticle .date span.text {display: inline; margin-right: 5px;/margin-right: 10px;}
.beforeArticle .publishedBy {margin-right: 5px;}
.beforeArticle a {text-decoration: underline; color:#464032;}
.beforeArticle a:hover {text-decoration: none; color:#464032;}
.linkTopic {text-transform:lowercase;}
.linkTopic:hover {text-transform:lowercase;}
.titreArticle, .divPageTitle h2 {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none; margin: 0; display: block;}
.titreArticle:hover, .divPageTitle h2:hover  {text-decoration:none; color:#464032;}
.article h2, .divPageTitle h2 {min-height: 20px; margin: 0; margin-top: 5px; line-height: 24px; margin-left: 10px;}
.topicTitle {text-decoration:none; color:#A7430F; text-transform: uppercase; font-size: 14px; font-weight: bold; line-height: 15px; margin-left: 10px; margin-bottom: 30px; margin-top: 10px;}
 
.afterReactions {text-align:left; display:block; height: 100px; line-height: 35px;}
.afterReactions .linkAddComment {font-size:100%;}
.afterReactions a {padding: 3px 5px; font-size: 12px; text-decoration: none; color:#A7430F; font-weight: bold;}
.afterReactions a:hover {text-decoration: underline; color: #A7430F;}
 
/*--------------------Liste des articles-------------------------*/
 
.listArticles {margin-bottom:25px; border:0px none; color:#464032; margin-top: 10px; padding: 10px;}
.resumeArticle {color:#464032; text-align: justify; padding: 0 5px; margin-top: 10px;}
.listArticles a {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none;}
.listArticles a:hover {text-decoration: none; color: #464032;}
.listArticles .categorieArticle a, .resumeArticle a {font-size: 11px; text-decoration: none; color:#464032;}
.listArticles .categorieArticle a:hover, .resumeArticle a:hover {text-decoration: underline;}
.listCommentedArticle {}
 
/*--------------------Mode resume-------------------------*/
.titreExtrait {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none; margin: 0; display: block;}
.titreExtrait:hover {text-decoration:none; color:#464032;}
.hrExtrait {border: 0px; display: none;}
.extraitArticle {margin-top:0px; color:#464032; text-align: justify; padding: 10px; margin-bottom: 25px;}
.extrait {margin-top:0px; color:#464032; text-align: justify; margin-bottom: 25px; padding-top: 10px;}
.extrait img {border: 1px solid #464032; padding: 4px; margin-right: 10px;}
.infoExtrait {min-height: 20px; margin: 0; margin-top: 5px; line-height: 24px; margin-left: 0px;}
.dateExtrait {padding: 5px 0px; width:600px; background-color: #E9E3CB; color:#464032; text-align: right; margin: 10px 0 10px 0; display: block; font-size: 13px; font-style: normal; font-weight: bold; line-height: 15px;}
.dateExtrait .separator {display: none;}
.dateExtrait .date span {display: none;}
.dateExtrait .date span.text {display: inline; margin-right: 5px;}
.dateExtrait .publishedBy {margin-right: 5px;}
.dateExtrait a {text-decoration: underline; color:#464032;}
.dateExtrait a:hover {text-decoration: none; color:#464032;}
.extrait a {text-decoration: none;}
.extrait a:hover {text-decoration: underline;}
.plusExtrait {font-size: 12px; color:#464032; margin-top: 15px; font-weight: normal; font-style: normal; line-height: 15px;}
 
/*--------------------Commentaires---------------------------- */
.h2commentMessage {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none; margin-bottom: 25px;}
.comment {}
.comment hr {}
.commentMessage {padding: 5px; padding-bottom: 0; margin: 0; color:#464032; text-align: justify; border-bottom: 0;}
.commentOption {padding: 2px 2px 3px 5px; margin: 0 0 25px 0; font-size: 11px; color:#464032; border-bottom: 1px solid #464032; font-style: normal; font-weight: bold;}
.responseMessage {text-align:right; background-color: #464032; color: #FFFDEA; padding: 5px 10px 5px 0;}
.responseOption {text-align: right;}
.afterReactions .linkAddComment {font-size:130%;}
.commentMessage  {min-height: 20px;}
 
 
/*-----------------Newsletter-----------------------------------*/
#divNewsletter {background-color: #FFFDEA; color: #464032; border: 10px dashed #A7430F;}
#divNewsletter h2 {text-align:center; color #A7430F;}
#divNewsletter input {border:solid 1px #dedede; font-size:100%; background-color:#FFF; color:#000000; height: 18px;}
#divNewsletter .button {background-color: #FFF; color: #000; border: 0px;}
#divNewsletter .newsletter {}
#divNewsletter {}
 
/* ---------------------Calendrier--------------------------------- */
.calendarTop1 {font-size: 14px; text-align: center; font-style: normal; color:#464032; font-weight: bold; text-transform: uppercase; padding-bottom: 3px;}
.calendarToday1 {font-size: 10px; font-weight: bold; color:#fff; background-color: #464032; border: 1px solid #464032;}
.calendarToday1 a {font-size: 10px; font-weight: bold; color:#464032;}
.calendarDays1 {width:50px; height:15px;font-size: 10px; font-style: normal; color:#464032; text-align: center;}
.calendarHeader1 {font-size: 10px; color:#464032; padding-top: 5px;}
.calendarTable1 {font-family: 'Arial'; font-size: 11px; width: 250px; float: center; padding: 5px 0; line-height: 12px; margin: auto;}
 
/*-----------------------Pagination-------------------------*/
.pagination {color:#464032; margin:10px auto}
/*----------------erreurs etc------------------------------*/
.error {color : #464646;}
 
/*----Newsletters-----*/
.newsletter li {list-style-type: none;}
 
/*----- accueil / menu -------*/
#menuob {/line-height: 25px; line-height: 22px; width: 600px; margin-bottom: 25px; background:  url(http://fdata.over-blog.net/99/00/00/01/designs/397/default/pics/menu.jpg) no-repeat center;
border: 0px;
padding: 0;
margin-top: 0;
}
 
#menuob a {
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 10px;
text-align: center;
margin: 0px 0px 0 10px;
}
 
#menuob a:hover {
background-color: #E0D3B3;
color: #2A1F0B;
text-decoration: none;
 
}
 
 
 
 
body {behavior: url(csshover.htc);}
div#menu a {color:#000000}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#CCCCCC}
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
/* rajout couleure de fond */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}
 
/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid}
 
div#menu ul ul {position: absolute;display:none; width:100px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:100px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 100px;}
 
/* rajout de couleures de fond et de survol */
div#menu ul.niveau3 li { background: #99CCCC}
div#menu ul.niveau3 li:hover { background: #9
 
 
 
Si quelques âmes charitable pouvait me donner un coup de pouce je les en remercie d'avance.

Salut,
 
<div id="menu" style="margin-left: 150px;">  
 
Enlève le style="margin-left: 150px;"

Vraiment un grand grand merci!!! ça fait deux jours que je galère avec ça je cherchais dans le CSS alors que le problème était ailleurs.
 
Encore merci!!!

Je reviens vers vous parce que maintenant je n'arrive pas à placer la barre tout en haut on dirait qu'il y a un padding qui traine dans le css cette fois ci. Quand pensez vous?
 

 
J'ai mis le html dans le cadre "texte libre" en rouge. Mais alors qu'on peut supprimer des modules ont ne peux pas supprimer le module menu juste au dessus qui pourtant ne me sert à rien.  

C'est sans doute dans ce module qu'il faudra mettre ton menu.  
 
Ta <div id="menu"> devrait être juste apres la <div class="column_content">
Et la c'est pas le cas, tu as la <div class="divTitreArticle"> entre les 2.

J'ai beau chercher je ne vois pas tous ces éléments (<div id="menu">  <div class="column_content">  <div class="divTitreArticle"> ) ?
 
Sinon le module menu personnalisé on ne peut y mettre que "un titre" accompagné d'un "lien".
 

Salut
 
Peux-tu préciser ce que tu veux dire par "déplacer la barre tout en haut" ?
(Non le menu ""module menu" tu t'en fous. Il est vide si tu n'y a pas touché...)

 
Salut! et bien je voudrais qu'il soit aligné avec le calendrier par exemple
 
je remet le lien du site où je test le truc http://testtouche.over-blog.com/#
 
Et oui le module "menu personnalisé" (celui que le blog nous impose) je n'y ai pas touché mais je me demande si ce n'est pas lui qui est en cause car on ne peut pas le supprimer malgré tout même si il n'apparait pas sur le blog.
 
C'est comme si il y avait un padding d'environ 50px en haut et en bas du menu déroulant.
 
--------------------------
 
Voilà le résultat que j'ai quand je déplace le module ou j'ai mis le code html du menu déroulant (en rouge) au dessus du module menu imposé
 

 
Une police plus grosse et des sous menu qui n'apparaissent plus.
 

 
Avec à la base
 

Oui. C'est ici :
 
.contenuArticle, .pageContent {
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}

J'ai joué sur les paramètres que tu m'a indiqué mais ça ne fait rien sur le menu déroulant. Je ne sais pas si le module texte libre fait partie du module article.

Sinon, une solution pas très propre, tu rajoute dans ton css un
 
#menu {margin-top:-60px;}  
 
Et tu ajuste ...

 
C'est peut être pas très propre mais ça marche super!!!!!
 
Merci pour votre aide à tous!

Je pense qu'il fallait que tu supprimes tes 4 padding. Mais si ça fonctionne c'est ok