Bonjour à toutes et à tous,
Je suis nouveau sur le forum, c'est pourquoi je risque de faire quelques fautes. Voici mon problème :
Je me suis inspiré du tutorial "un menu déroulant en CSS et XHTML" pour faire un menu déroulant vertical. Cependant je suis géné par les décalages lorsque les sous-meuns apparaissent. Donc voilà ma question : dans le tutorial présenté sur le menu vertical, que faudrait-il ajouter pour que le décalage disparaissent. Merci d'avance.
Voici mon script :
Je suis nouveau sur le forum, c'est pourquoi je risque de faire quelques fautes. Voici mon problème :
Je me suis inspiré du tutorial "un menu déroulant en CSS et XHTML" pour faire un menu déroulant vertical. Cependant je suis géné par les décalages lorsque les sous-meuns apparaissent. Donc voilà ma question : dans le tutorial présenté sur le menu vertical, que faudrait-il ajouter pour que le décalage disparaissent. Merci d'avance.
Voici mon script :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
window.onload=montre;
function montre(id)
{
var d=document.getElementById(id);
for (var i=1; i<=10; i++)
{
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<style type="text/css" media="screen">
body
{
margin-left: 10px;
/*background-color:#ffc81f;*/
font:120% "times new roman",verdana, arial, serif;/*fontes de tous les caractères, menus et sous menus*/
}
#menu_general dt/*les items principaux*/
{
cursor: pointer;
margin-bottom:10px;/*espace entre les items*/
text-align:left;
}
#menu_general li/*les items sous menus*/
{
text-align:center;
background:white;
width:100px;
margin-left:50px;
font-size:0.8em;
margin-top:2px;/*espace entre les items des sous menus*/
}
#menu_general li a, #menu_general dt a/*menu general+sous menus*/
{
color:red;/*concerne tous les caractères*/
text-decoration:none;
display:block;
}
dl,dt,dd,ul,li/*Tous les menus et sous menus*/
{
margin:1px;
padding:1px;
list-style-type: none;
}
#menu_general li a:hover, #menu_general dt a:hover/*menu general+sous menus*/
{
background:yellow;
color:blue;
}
</style>
</style>
</head/>
<Body>
<dl id="menu_general">
<dt onclick="javascript:montre();"><a href="indexf.php" title="retour accueil">Accueil</a></dt>
<dt onclick="javascript:montre();"><a href="historiquef.php" title="les origines et les apports">Historique</a></dt>
<dt onmouseover="javascript:montre('smenu1');"><a onmouseover= "javascript:montre('smenu1');" href="">Activités</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul >
<li ><a href="chant_pop.php" title="Atelier chant choral">Chant Populaire</a></li>
<li><a href="noel.php" title="Commission Crèches">Concours de crèches</a></li>
<li><a href="confec_cost.php" title="Commission du Costume">Confection de costumes</a></li>
<li><a href="cuisine_prov.php" title="Atelier cuisine">Cuisine Provençale</a></li>
<li><a href="langue_prov.php" title="Atelier langue">Langue Provençale</a></li>
<li><a href="ed.php" title="On forme les élèves qui plus tard accèderont au ballet">L'école de danse</a></li>
<li><a href="promotion.php" title="Vente et autres">Promotion</a></li>
</ul>
</dd>
<dt onclick="javascript:montre();"><a href="festivalf.php" title="Une émanation de La Capou">Festival de Martigues</a></dt>
<dt onclick="javascript:montre();"><a href="balletf.php" title="Nos danseu(r)s(es) et musiciens">Ballet Folklorique</a></dt>
<dt onmouseover="javascript:montre('smenu2');"><a onmouseover= "javascript:montre('smenu1');" href="">Spectacles à la Carte</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="anim.php" title="défilé, spectacles de rue">Animations</a></li>
<li><a href="ef.php" title="Fêtes en Provence">Ballet Folklorique</a></li>
<li><a href="ballet_th.php" title=" Notre dernière création : Viro viro Arlequin">Ballet théâtre</a></li>
<li><a href="concert_bal.php" title="concert de Noël, baleti, concert enfants">Concert, bal</a></li>
<li><a href="noel.php" title="un spectacle féerique">Veillée Calendale</a></li>
</ul>
<dt onmouseover="javascript:montre('smenu3');"><a onmouseover= "javascript:montre('smenu1');" href="">Fêtes Populaires</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="rois.php" title="Soirée réservée aux membres">Les Rois</a></li>
<li><a href="carnaval.php" title="défilé, fielouas">Carnaval</a></li>
<li><a href="stjean.php" title="spectacle et sauts de feux">Feux de la Saint Jean</a></li>
<li><a href="pecheurs.php" title="La Saint Pierre">Fête des pécheurs</a></li>
<li><a href="noel.php" title="Crèches, calendales, concert,etc.">Noël</a></li>
</ul>
</dd>
<dt onclick="javascript:montre();"><a href="cd_dvdf.php" title="audio et vidéo">CD & DVD</a></dt>
<dt onclick="javascript:montre();"><a href="liensf.php" title="nos relations">Liens</a></dt>
<dt onclick="javascript:montre();"><a href="contactf.php" title="Pour nous voir">Contacts</a></dt>
<dt onclick="javascript:montre();"><a href="agendaf.php" title="notre calendrier prochain">Agenda</a></dt>
<dt onclick="javascript:montre();"><a href="livre_or.php" title="vos impressions">Livre d'Or</a></dt>
</dl>
</body>
</html>