Boujour 
voilà j'ai encore un probleme avec mon menu deroulant. des que je change la taille du texte en plus petit dans le sous menu ça marche dans mozilla mais avec IE ça pose probleme, je ne peux plus aller dans les sous menu il se ferme tout de suite. J'ai essayé de le changer de differentes maniere , en faisant une classe que j'avais appelé avec la balise <a> et en changeant dans le menu li , et rien ne marche . Par contre si je veux le mettre plus gros ça marche tjrs ...
Le probleme c'est que si j'arrive pas a reduire le texte mes menus ne tiendront pas sur une ligne et c'est pas tres esthetique.
Enfin voila si vous avez une idée d'ou ça vient ça m'aiderait grandement
je vous met mon code.
merci
Modifié par laloote (18 Feb 2005 - 12:01)
voilà j'ai encore un probleme avec mon menu deroulant. des que je change la taille du texte en plus petit dans le sous menu ça marche dans mozilla mais avec IE ça pose probleme, je ne peux plus aller dans les sous menu il se ferme tout de suite. J'ai essayé de le changer de differentes maniere , en faisant une classe que j'avais appelé avec la balise <a> et en changeant dans le menu li , et rien ne marche . Par contre si je veux le mettre plus gros ça marche tjrs ...
Le probleme c'est que si j'arrive pas a reduire le texte mes menus ne tiendront pas sur une ligne et c'est pas tres esthetique.
Enfin voila si vous avez une idée d'ou ça vient ça m'aiderait grandement
je vous met mon code.
merci
<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">
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
text-align: center;
}
#global {
margin-left: auto;
margin-right: auto;
width:800px;
text-align: left;
position: relative;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 112px;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: url(images/wood01.jpg);
border: 1px solid gray;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
font-family: Verdana;
font-size: 0.9em;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover , #menu li a:focus,#menu dt a:focus{
background: url(images/survol.jpg);
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
</style>
</head>
<body>
<img src="images/imagehaut.jpg" width="800" height="100" alt="haut de page">
<div id="global">
<div id="menu">
<dl>
<dt onMouseOver="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu1');">Notre métier </dt>
<dd id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Histoire du piano</a></li>
<li><a href="#">Facteur de piano</a> </li>
<li><a href="#">Mecanisme</a></li>
<li><a href="#">Revue de presse</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu3');">Nos Services</dt>
<dd id="smenu3" onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Service Concert</a></li>
<li><a href="#">Service Accord</a></li>
<li><a href="#">Restauration</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu2');">Magasin</dt>
<dd id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Pianos à queue</a></li>
<li><a href="#">Piano droit</a></li>
<li><a href="#">Piano mécanique</a></li>
<li><a href="#">Clavinova</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu4');">Devis</dt>
<dd id="smenu4" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Accord</a></li>
<li><a href="#">Restauration</a></li>
<li><a href="#">Renseignements</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu5');">Contact</dt>
<dd id="smenu5" onMouseOver="javascript:montre('smenu5');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu6');"><a href="#">Forum</a></dt>
</dl>
</div>
</div>
Modifié par laloote (18 Feb 2005 - 12:01)
