Sujet Précédent Sujet Suivant

Décalage automatique menu dynamique

yanniks -  
g Messages postés 1285 Statut Membre -
Bonjour,

J'ai récupéré sur le net un menu dynamique assez joli.
Le problème est que sur la partie menu à déploiement verticale, lorsque je met deux menu, le déploiement du premier empiette sur celui du second. Comment faire pour que cela se décale ?

Merci :)

Voici le code du menu : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0054)http://www.css-faciles.com/exemple-menu-deroulant2.htm -->
<HTML><HEAD><TITLE>Menu déroulant en CSS</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>#monmenu {
	FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL {
	BORDER-RIGHT: #b0b0b0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0b0b0 1px solid; DISPLAY: none; PADDING-LEFT: 0px; LEFT: 164px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #b0b0b0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #b0b0b0 1px solid; POSITION: absolute; TOP: -1px
}
#monmenu LI {
	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 160px; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #e0e0e0
}
#monmenu LI:hover {
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI.sfhover {
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI A {
	TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI:hover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI.sfhover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI.plus {
	BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(illustrations/fdroite.gif); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
}
</STYLE>

<DIV id=monmenu style="PADDING-LEFT: 145px">
<H2>Menu à déploiement horizontal</H2>
<UL class=niveau1>
  <LI>Menu 
  <UL class=niveau2>
    <LI class=plus><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/bebe.gif" align=top border=none> 
    Extras</A> 
    <UL class=niveau3>
      <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
      src="Menu déroulant en CSS_fichiers/note.gif" align=top border=none> 
      Demander la note</A> </LI>
      <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
      src="Menu déroulant en CSS_fichiers/serveuse.gif" align=top border=none> 
      Draguer la serveuse</A> </LI></UL></LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/entree.gif" align=top border=none> 
    Entrée</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/plat.gif" align=top border=none> 
    Plat</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/dessert.gif" align=top border=none> 
    Dessert</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/cafe.gif" align=top border=none> 
    Café</A> </LI></UL></LI></UL>
<H2>Menu à déploiement vertical</H2>
<UL class=niveau1>
  <LI>Menu 
  <UL class=niveau2 style="LEFT: 0px; TOP: 22px">
    <LI class=plus><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/bebe.gif" align=top border=none> 
    Extras</A> 
    <UL class=niveau3>
      <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
      src="Menu déroulant en CSS_fichiers/note.gif" align=top border=none> 
      Demander la note</A> </LI>
      <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
      src="Menu déroulant en CSS_fichiers/serveuse.gif" align=top border=none> 
      Draguer la serveuse</A> </LI></UL></LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/entree.gif" align=top border=none> 
    Entrée</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/plat.gif" align=top border=none> 
    Plat</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/dessert.gif" align=top border=none> 
    Dessert</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/cafe.gif" align=top border=none> 
    Café</A> </LI></UL></LI></UL>
	<UL class=niveau1>
  <LI>Menu 
  <UL class=niveau2 style="LEFT: 0px; TOP: 22px">
    <LI class=plus><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/bebe.gif" align=top border=none> 
    Extras</A> 
    <UL class=niveau3>
      <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
      src="Menu déroulant en CSS_fichiers/note.gif" align=top border=none> 
      Demander la note</A> </LI>
      <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
      src="Menu déroulant en CSS_fichiers/serveuse.gif" align=top border=none> 
      Draguer la serveuse</A> </LI></UL></LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/entree.gif" align=top border=none> 
    Entrée</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/plat.gif" align=top border=none> 
    Plat</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/dessert.gif" align=top border=none> 
    Dessert</A> </LI>
    <LI><A href="http://www.rankspirit.com/indexfr.php"><IMG alt=" " 
    src="Menu déroulant en CSS_fichiers/cafe.gif" align=top border=none> 
    Café</A> </LI></UL></LI></UL></DIV></BODY></HTML>

1 réponse

Réponse 1 / 1
g Messages postés 1285 Statut Membre 577
 
Bonjour,

Utilise le menu à déploiement horizontale, tu auras ainsi automatiquement le décalage.

Bonne journéez.
1

Discussions similaires

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
Utilisateur anonyme -
TomH. -

13 réponses
menu caché
laurent -
ChariduP -

7 réponses