Menu déroulant: éviter les debordements

Bonjour,
j'ai adapté l'un des menu déroulant horizontal d'Alsacréations pour afficher des menus de liens. ( merci ! )
http://www.avenir-geopolitique.net/

je ne comprends pas comment faire pour que lors du déroulement des sous menus, ils viennent se superposer au texte en dessous, et non repousser le tout...
j'ai cru comprendre ( en lisant un tuto donné en lien sur le site) qu'il faut mettre les sous menus en position absolue... mais je n' y arrive pas . je décale tout.

css :

/*
 *  Styles généraux
 */

body, html {
  margin: 0;
  padding: 0;
  background: #435466;
  color: #abc;
}

a {
  color: white;
  text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

a img { border: none; }

h1, h2 { margin-top: 0; }

p { text-align: justify; }

/* sert à étirer les boites apres un float */
.spacer {
  clear: both;
  visibility: hidden;
  height: 0;
}


/*
 *  Styles spécifiques
 */


#head {
  background-color: #0a0c2b;
  background-image: url('img/degrade.png');
  background-repeat: repeat-x;
  background-position:  left bottom;
}
#categories {
  /*list-style-image: url(img/bullet.png);
  list-style-position: inside;*/
  font-size: 90%;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
#categories, #ddh, #partn ul, #menu 
dl, dt, dd, ul, li  { list-style: none; }

.contenu, #articles, #contact, #partn, #cc-w3 { border: 3px outset silver; }

#nav, #nav * 	{ color: #047; }
#auteur 		{ font-style: italic; }
#articles		{ background: #aaa; }
#articles h2	{ color: #435466; }
#articles h3	{ background: #435466; }
#articles .suite{ background: #666 }
#articles .desc { text-align: justify; color: #555; font-size: 90%; }


/*
 *  Structure
 */

#head { 
  padding: .5em;
  /*width: 100%;*/
}

#head p {
  float: left;
  margin: 0;
}
#ddh, #categories {
  float: right;
  clear: right;
  margin: 0;
}
#menu {
  float: right;
  clear: right;
  margin: 1em;
} 

#categories { margin-top: 2em; }
#ddh { margin-top: .5em; }
#menu { margin-top: .1em; } 
#ddh li, #categories li {
  display: inline;
  margin-right: 1em;
  padding: 0;
}
#menu 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
}
#menu dl {
float: left;
width: 14em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #435466;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
font-weight: bold;
background: #435466;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0px none;
}
#menu li a:hover {
text-decoration: underline;
}
#menu li a:hover, #menu dt a:hover {
background: #0a0c2b;
}

/* les liens de navigations sont moins utiles en graphique
  Il apparaissent en haut, en gris */
#nav {
  text-align: center;
  width: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}

/* différents blocs
 voir  http://pompage.net/pompe/margesnegatives/  */
.conteneur {
  float: right;
  width: 100%;
  margin-left: -19em;
}
.contenu {
  margin: 1em;
  margin-left: 19em;
  padding: 1em;
}

#articles, #contact, #cc-w3 {
  float: left;
  width: 14em;
  margin: 1em;
  margin-right: 0;
  padding: 1em;
  clear: left;
}
#contact ul {
  margin: 0;
  padding: 0;
  margin-left: 1em;
}
#contact dt {
  float: left;
  clear: left;
  margin: 0 1ex;
}

  
/* affichage de l'article */
#contenu img {
  float: left;
  margin: 0 1em .5em 0;
}
#contenu * img {
  float: none;
  margin: 0;
}

#auteur {
  float: right;
  margin-right: 2em;
  height: 0;
}

/* liste des articles */
#articles {
  padding: 1em 0;
  width: 16em;
}
#articles h2 {
  margin: 0 .5em;
}
#articles h3 {
  margin: .5em 0 0 0;
  padding: 0 1ex;
}
#articles .suite { 
  padding-left: 35px;
  margin: 0;
}
#articles .desc {
  margin: 0;
  padding: 0 2ex;
}
#articles .desc img {
  float: left;
  margin-right: 1ex;
}

#partn { margin: 1em; }
#partn h2 { margin: .2em 1em 0; }
#partn ul { 
 overflow: auto;
 text-align: center;
 margin: 0;
 padding: 0;
}
#partn ul { height: 95px; }
#partn li { height: 105px; }


.retour { text-align: right; margin-right: 2em; }


/*
 *  Pour l'impression
 */
@media print {
  /* pas de fond */
  body, html {
    color: black;
    background: none;
  }
  
  /* on n'affiche pas les menus, etc. */
  #nav, #categories, #ddh, #menu, #articles, #contact, #partenaires {
    display: none;
  }
  #conteneur, #contenu {
    float: none;
    margin: 0;
  }
  
}

De plus malgré le onmouseout... parfois les sous menus restent affichés ... mais aps toujours, vous voyez pourquoi ?

Merci

ps: oui, oui, j'ai bien tout lu , je vais faire un fichier .js et mettre un lien pour alléger le code
Modifié par Licia (16 Jul 2005 - 00:03)

Bonjour,
j'ai trouvé
http://www.avenir-geopolitique.net/

il suffisait d'isoler en position absolue l'ul du menu

#menu  ul  {
 position:absolute;
  top:11em;
  }

je m'ingénais à insérer un #fixElement et un #mainContent pour isoler toute la div : #menu

en suivant ce tutoriel : /http://www.ibilab.net/webdev/articles/CSS/position-fixed-pour-tous-navigateurs-2.htm

mais c'était plus simple !

Bonne journée

attention, ce n'est pas encore tout à fait ça :

Dans IE, tes sous-menus se superposent au menu:



Et dans Opera, le sous-menus apparaît trop bas.



Du coup, il est impossible de l'utiliser car il disparait dès que le menu perd le focus. Les items de menus n'étant pas des liens... l'utilisateur est totalement bloqué.

erf...

comment régler la valeur du top , tout le reste étant en "float" et pour toutes les résolutions ?

merci
Modifié par Licia (15 Jul 2005 - 11:00)

Bonjour,
Est-ce que c'est mieux cmme ça ? ( je n'ai pas Opera sous la main pendant quelques jours )
http://www.avenir-geopolitique.net/

#menu  ul  {
 position:absolute;
 top:8em;
 margin-left: 0;
 width: 11em;
   }
#menu dl {
float: left;
width: 10em;
}

D'autre part , y a-t'il une astuce pour optimiser le CSS , afin que sous IE, les liens sur le Header : Forum , Droits de l'homme et Droits de l'enfant (div:#ddh,) s'alignent bien sur une seule lgne.

CSS complet sur le premier post.

Licia a écrit :
Bonjour,
Est-ce que c'est mieux cmme ça ?

C'est utilisable.


Modifié par Laurent Denis (16 Jul 2005 - 13:55)

Tiens au fait, qu'en est-il de ce sujet ?
Il est toujours en cours ? Il est [Résolu] ? Il est à l'abandon ?

Raphael a écrit :
Tiens au fait, qu'en est-il de ce sujet ?
Il est toujours en cours ? Il est [Résolu] ? Il est à l'abandon ?

Bonjour ,
Non ce sujet n'est pas résolu, j'ai "bricolé" avec le margin-top en position absolue, mais ce n'est pas une vraie solution.

Je lis tout ce que je trouve sur le Net, mais n'ai pas encore compris comment faire. D'autant que j'ai d'autres problèmes à résoudre encore pour optimiser ce site.

Merci de m'aiguiller si possible.


CSS modifée ( pour d'autres raisons aussi )

/*
 *  Styles généraux
 */

body, html {
  margin: 0;
  padding: 0;
  background: #435466;
  color: #abc;
}

a {
  color: white;
  text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

a img { border: none; }

h1, h2 { margin-top: 0; }

p { text-align: justify; }

}
/* sert à étirer les boites apres un float */
.spacer {
  clear: both;
  visibility: hidden;
  height: 0;
}


/*
 *  Styles spécifiques
 */


#head {
  background-color: #0a0c2b;
  background-image: url('img/degrade.png');
  background-repeat: repeat-x;
  background-position:  left bottom;
}
#categories {  
  font-size: 90%;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
#categories, #ddh, #partn ul, #menu 
dl, dt, dd, ul, li  { list-style: none; }

.contenu, #articles, #contact, #partn, #cc-w3 { border: 3px outset silver; }

#nav, #nav * 	{ color: #047; }
#auteur 		{ font-style: italic; }
#articles		{ background: #aaa; }
#articles h2	{ color: #435466; }
#articles h3	{ background: #435466; }
#articles .suite{ background: #666 }
#articles .desc { text-align: justify; color: #555; font-size: 90%; }


/*
 *  Structure
 */

#head { 
  padding: .5em;
  /*width: 100%;*/
}

#head p {
  float: left;
  margin: 0;
}
#ddh, #categories {
  float: right;
  clear: right;
  margin: 0;
}

#categories { margin-top: 2em; }
#ddh { margin-top: .5em; }
#ddh li, #categories li {
  display: inline;
  margin-right: 1em;
  padding: 0;
}
#menu {
  float: right;
  clear: right;
  margin: 0;
} 
#menu { margin-top: .1em; } 
#menu 
 dl, dt, dd, li , ul {
margin: 0;
padding: 0;
}
#menu dl {
float: left;
width: 10em;
}
#menu  ul {
 position: absolute;
 top: 8em;  
 width: 10em;
   }
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #435466;
margin: 1px;
}
#menu dd {
display: none;
}
#menu li {
text-align: center;
font-weight: bold;
background: #435466;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0px none;
}
#menu li a:hover {
text-decoration: underline;
}
#menu li a:hover, #menu dt a:hover {
background: #435466;
}

/* les liens de navigations sont moins utiles en graphique
  Il apparaissent en haut, en gris */
#nav {
  text-align: center;
  width: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}

/* différents blocs
 voir  http://pompage.net/pompe/margesnegatives/  */
.conteneur {
  float: right;
  width: 100%;
  margin-left: -18em;
}
.contenu {
  margin: 0.3em;
  margin-left: 18em;
  padding: 1em;
}

#articles, #contact, #cc-w3 {
  float: left;
  width: 14em;
  margin: 0.3em;
  margin-right: 0;
  padding: 1em;
  clear: left;
}
#contact ul {
  margin: 0;
  padding: 0;
  margin-left: 1em;
}
#contact dt {
  float: left;
  clear: left;
  margin: 0 1ex;
}

  
/* affichage de l'article */
#contenu img {
  float: left;
  margin: 0 1em .5em 0;
}
#contenu * img {
  float: none;
  margin: 0;
}

#auteur {
  float: right;
  margin-right: 2em;
  height: 0;
}

/* liste des articles */
#articles {
  padding: 1em 0;
  width: 16em;
}
#articles h2 {
  margin: 0 .5em;
}
#articles h3 {
  margin: .5em 0 0 0;
  padding: 0 1ex;
}
#articles .suite { 
  padding-left: 35px;
  margin: 0;
}
#articles .desc {
  margin: 0;
  padding: 0 2ex;
}
#articles .desc img {
  float: left;
  margin-right: 1ex;
}

#partn {  
  float: right;
  width: 700px;
  margin: 0.3em;  
  padding: 1em;
  clear: right;
  }
  
#partn h2 { margin: .2em 1em 0; }
#partn ul { 
 overflow: auto;
 text-align: center;
 margin: 0;
 padding: 0;
}
#partn ul { height: 95px; }
#partn li { height: 105px; }


.retour { text-align: right; margin-right: 2em; }


/*
 *  Pour l'impression
 */
@media print {
  /* pas de fond */
  body, html {
    color: black;
    background: none;
  }
  
  /* on n'affiche pas les menus, etc. */
  #nav, #categories, #ddh, #menu, #articles, #contact, #partenaires {
    display: none;
  }
  #conteneur, #contenu {
    float: none;
    margin: 0;
  }
  
}