Voici le code. Je ne peux mettre cette page en ligne pour l'instant, désolé.
Mon problème est sans doute que je veux brûler certaines étapes, mais cette manière de présentation me paraît sympa.
Le code en rouge est simplement là pour montrer l'elasticité du menu (seulment un point !)
Merci de l'aide apportée.
Jacobéo
/* ////////// HTML du menu déroulant ////////// */
<!-- début de menu déroulant -->
<div id="menuDeroulant">
<li><a href="#">Accueil</a></li>
<ul class="sousMenu">
<li><a href="pagin/pag_trav.htm" target="_parent">en attente avec un longueur variable</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
</ul>
<li><a href="#">en attente 1</a></li>
<ul class="sousMenu">
<li><a href="#.php" target="_parent">court</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
</ul>
<li><a href="#">en attente 2, longueur extensible du menu</a></li>
<ul class="sousMenu">
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
</ul>
<li><a href="#">en attente 3</a></li>
<ul class="sousMenu">
<li><a href="#.php" target="_parent">.</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
</ul>
<li><a href="#">en attente 4</a></li>
<ul class="sousMenu">
<li><a href="#">. </em></a>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
</ul>
<li><a href="#">en attente 5</a></li>
<ul class="sousMenu">
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente</a></li>
<li><a href="#.php" target="_parent">en attente, ce lien est la longueur extrême !</a></li>
</ul>
</div>
<!-- fin de menu déroulant -------------------->
/* ////////// HTML du pied de page ////////// */
<!--Mentions légales -->
<ul class="menu">
<li><a href="#">Mentions légales<span> Item. ©2008 et suivants. Tous droits réservés. Inscription à la CNIL en cours.</span></a></li>
</ul>
/* ////////// feuille CSS du pied de page (origine Alsacréations) ////////// */
ul {
font-size: 0.5em ;
list-style-type: none;
margin:0;
padding:0;
position: absolute;
top: 920px; /* positionnement du menu, que vous pouvez changer à loisir */
left: 1em;
width: 100%; /* précision pour Opera */
}
li {
float: left;
}
.menu a { /* définition de chaque bouton du menu */
width: auto; /* largeur du bouton, que vous pouvez changer à loisir */
height: auto;
float: left;
display: block;
text-align: center;
border-top: 1px solid rgb(255,255,255);
border-left: 1px solid rgb(255,255,255);
text-decoration: none;
color: rgb(100,100,100);
background: ;
padding-left: 0.5em;
}
.menu a:hover {
color: #411;
background: ;
border: 1px solid gray;
border-bottom: 0px;
color: #fff;
}
.menu a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
.menu a:hover span { /* définition de la balise <span> au survol */
display: block;
position: absolute;
top: 20px;
left: 0;
width: auto; /* largeur de la zone de commentaires, selon la taille du menu */
text-align: left;
border-top: 1px solid gray;
color: rgb(255,255,255);
}
/* ////////// feuille de style du menu (source Alsacréations) ////////// */
body {
color: rgb(255,255,255);
font-family: Arial, Helvetica, sans-serif;
font-variant: small-caps;
}
#menuDeroulant{
border: 0;
border-bottom: 3px solid transparent;
border-top: 20px;
left: 20px;
font-size: 12px;
list-style-image: url(../favico/societe.png);
margin: 0;
padding: 0;
position: absolute;
top: 294px;
width: 1024px;
z-index: 20;
}
#menuDeroulant li{
background-image: url(../png/fond1r.png);
background-repeat: repeat-x;
border: 0;
border-right: 3px solid transparent;
color: rgb(255,255,255);
float: left;
list-style-image: url(../favico/societe.png);
margin: 0;
padding: 0;
width: 142;
height: 25px;
}
#menuDeroulant .sousMenu{
border: 0;
display: none;
list-style-image: url(../favico/societe.png);
margin: 0;
padding: 0;
}
#menuDeroulant .sousMenu li{
background-image: url(../png/fond2r.png);
border: 0;
border-right: 1px solid transparent;
border-top: 20px solid transparent;
float: none;
margin: 0;
padding: 0;
width: 149;
}
#menuDeroulant li a:link{
border-right: 1px solid transparent;
color: rgb(228,213,35);
font-weight: bold;
font-size: 1.2em;
display: block;
height: 1%;
margin: 0;
padding: 4px 8px;
text-decoration: none;
}
#menuDeroulant li a:visited{
border-right: 1px solid transparent;
border-top: 1px solid transparent;
color: rgb(255,0,0);
display: block;
height: 1%;
margin: 0;
padding: 4px 8px;
text-decoration: none;
}
#menuDeroulant li a:hover {
border-right: 1px solid transparent;
border-top: 1px solid transparent;
}
#menuDeroulant li a:active {
color: rgb(255,0,0);
}
#menuDeroulant .sousMenu li a:link{
border: 0;
border-top: 1px solid transparent;
display: block;
margin: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:visited{
border: 0;
border-top: 1px solid transparent;
color: rgb(255,100,50);
display: block;
font-weight: bold;
margin: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:active {
border: 0;
border-top: 1px solid transparent;
color: rgb(255,255,255);
display: block;
font-weight: bold;
margin: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover{
border: 0;
border-top: 1px solid transparent;
color: rgb(255,0,0);
display: block;
font-weight: bold;
margin: 0;
text-decoration: none;
}
#menuDeroulant li:hover > .sousMenu {
display: block;
}
