Bonjour a tous,
voila j'ai créer un menu css / java horizontal que j'ai créer comme indiqué dans le tuto. J'ai juste un petit soucis, c'est que mes sous menu s'affiche mais il arrive parfois que sans raison je dois passer ma souris 2-3 fois sur l'onglet principal pour pouvoir acceder a mon sous menu.
Ca marche mais c'est un peu embetant pour une naviguation optimale.
Voici mon code css :
voici mon code html :
Est ce que quelqu'un aurait une idée ?
D'avance merci
Modifié par mathrix (14 Apr 2008 - 15:45)
voila j'ai créer un menu css / java horizontal que j'ai créer comme indiqué dans le tuto. J'ai juste un petit soucis, c'est que mes sous menu s'affiche mais il arrive parfois que sans raison je dois passer ma souris 2-3 fois sur l'onglet principal pour pouvoir acceder a mon sous menu.
Ca marche mais c'est un peu embetant pour une naviguation optimale.
Voici mon code css :
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
margin-left: 1px;
z-index: 100;
top: 72px;
left: auto;
right: auto;
}
#menu dl {
float: left;
width: 132px;
margin-right: 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #005da8;
color: #fff;
height: 22px;
font-size: 11px;
}
#menu dd {
border: 1px solid #005da8;
}
#menu li {
text-align: left;
padding-left: 3px;
background: #337eb8;
font-size: 11px;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #7c92c3;
}
voici mon code html :
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">ACTUALITES</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');"
onmouseout="javascript:montre('');">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="actualite.html">Actualités</a></li>
<li><a href="societe.html">Notre
société</a></li>
<li><a href="equipe.html">Notre
équipe</a></li>
<li><a href="#"
target="_blank">Galerie photos</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">MECANIQUE</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');"
onmouseout="javascript:montre('');">
<ul>
<li><a href="mecanique.html">Mécanique
Inbord</a></li>
<li><a href="electricite.html">Electricité</a></li>
<li><a href="formation.html">Formation continue</a></li>
<li><a href="hivernage.html">Hivernage</a></li>
<li><a href="agence.html">Agence</a></li>
<li><a href="remotor.html">Remotorisation</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">VENTE</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');"
onmouseout="javascript:montre('');">
<ul>
<li><a href="riva.html">Riva</a></li>
<li><a href="nimbus.html">Nimbus</a></li>
<li><a href="occasion.html">Occasions</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">RENOVATION</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');"
onmouseout="javascript:montre('');">
<ul>
<li><a href="ancienmot.html">Anciens moteurs</a></li>
<li><a href="bateaubois.html">Bateau en bois</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');">ECOLOGIE</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');"
onmouseout="javascript:montre('');">
<ul>
<li><a href="environnement.html">Environnement</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu6');">CONTACT</dt>
<dd id="smenu6" onmouseover="javascript:montre('smenu6');"
onmouseout="javascript:montre('');">
<ul>
<li><a href="contact.html">Nous contacter</a></li>
<li><a href="plan.html">Plan d'accès</a></li>
</ul>
</dd>
</dl>
</div>
Est ce que quelqu'un aurait une idée ?
D'avance merci
Modifié par mathrix (14 Apr 2008 - 15:45)