bonjour a tous,
merci de vos reponses a ma question du 12.08
j'ai effectivement pris conseil aupres des tutoriels, mais voilà, au repos le sous-menu s'affiche, et lors du passage de la souris il devient vertical. pouvez m'indiquer les codes CSS qu'il convient pour que cela fonctionne correctement...d'avance merçi..ci dessous les codes html et css concernées.
[cod<ul id="liensNav">
<li><a href="../index.html">accueil</a>
<ul class="sousmenu">
<li><a href="#"> autrefois</a></li>
<li><a href="#">aujourd'ui</a></li>
</ul></li>
<li><a href="ver-a-soie.html">le ver à soie</a>
<ul class="sousmenu">
<li><a href="cocon.html">cocon </a></li>
<li><a href="le ver.html"> le ver </a></li>
<li><a href="le papillon.html">le papillon</a></li>
</ul></li>
<li><a href="pecher.html">le pêcher</a></li>
<li><a href="chataigneraie.html">le châtaignier</a></li>
<li><a href="decouverte.html">découverte</a></li>
<li><a href="hebergement.html">hebergement</a></li>
<li class="dernier"><a href="votre-avis.html">votre avis</a></li>
</ul><!-- fin menu -->
</div>e=html][/code]
#liensNav {
margin: 0;
padding: 0.5em 3em;
background:#686397;
}
#liensNav li {
display: inline;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#liensNav li.dernier {
border-right: 0;
}
#liensNav a {
color:#d4ec84;
}
#liensNav a:hover {
color:#FFFFFF;
}
#liensNav a:active {
color:#FF0000;
}
/*-------------------sous-menu deroulant-----------------------*/
#liensNav ul {
margin:0;
padding:0;
text-align: center;
list-style-type:none;
background-color:#686397;
}
#liensNav li {
float:left;
}
#liensNav li a {
display:block;
color:#d4ec84;
text-decoration:none;
}
#liensNav .sousmenu il ul {
display:none;
}
#liensNav ul li:hover ul {
display:block;
}
#liensNav li:hover ul li {
float:none;
}
#liensNav li ul {
position:absolute;
}
#liensNav {
height:10px;
}
/*-------------------fin du menu deroulant----------*/
/* ----
merci de vos reponses a ma question du 12.08
j'ai effectivement pris conseil aupres des tutoriels, mais voilà, au repos le sous-menu s'affiche, et lors du passage de la souris il devient vertical. pouvez m'indiquer les codes CSS qu'il convient pour que cela fonctionne correctement...d'avance merçi..ci dessous les codes html et css concernées.
[cod<ul id="liensNav">
<li><a href="../index.html">accueil</a>
<ul class="sousmenu">
<li><a href="#"> autrefois</a></li>
<li><a href="#">aujourd'ui</a></li>
</ul></li>
<li><a href="ver-a-soie.html">le ver à soie</a>
<ul class="sousmenu">
<li><a href="cocon.html">cocon </a></li>
<li><a href="le ver.html"> le ver </a></li>
<li><a href="le papillon.html">le papillon</a></li>
</ul></li>
<li><a href="pecher.html">le pêcher</a></li>
<li><a href="chataigneraie.html">le châtaignier</a></li>
<li><a href="decouverte.html">découverte</a></li>
<li><a href="hebergement.html">hebergement</a></li>
<li class="dernier"><a href="votre-avis.html">votre avis</a></li>
</ul><!-- fin menu -->
</div>e=html][/code]
#liensNav {
margin: 0;
padding: 0.5em 3em;
background:#686397;
}
#liensNav li {
display: inline;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#liensNav li.dernier {
border-right: 0;
}
#liensNav a {
color:#d4ec84;
}
#liensNav a:hover {
color:#FFFFFF;
}
#liensNav a:active {
color:#FF0000;
}
/*-------------------sous-menu deroulant-----------------------*/
#liensNav ul {
margin:0;
padding:0;
text-align: center;
list-style-type:none;
background-color:#686397;
}
#liensNav li {
float:left;
}
#liensNav li a {
display:block;
color:#d4ec84;
text-decoration:none;
}
#liensNav .sousmenu il ul {
display:none;
}
#liensNav ul li:hover ul {
display:block;
}
#liensNav li:hover ul li {
float:none;
}
#liensNav li ul {
position:absolute;
}
#liensNav {
height:10px;
}
/*-------------------fin du menu deroulant----------*/
/* ----