Bonjour,
Je sais c'est surement un sujet déjà débattu maintes fois mais j'ai bien lu plein de choses et j'ai pas trouvé de réponses !!
Donc sur mon site je voudrais avoir un menu horizontal en haut de la page avec des sous menus qui se déroulent au passage de la souris. Jusqu'ici tout va bien grâce aux tutoriaux de alsacreations.
Mais le problème du au positionement float c'est que forcement mes différents items de menu ne sont visuellement pas dans le conteneur. Donc pour régler cela je décide d'appliquer la propriete overflow:auto au conteneur.
Youpi ca marche mais seulement sous Firefox !
Car sous IE ca me mets un ascenceur minuscule a droite.
Donc toujours pas découragé je sors ma deuxieme feinte de l'ours la balise <hr /> Avec les proprietes clear:both et visibility:hidden;
Seul problème c'est que sous Firefox mes items de menu ne sont toujours pas dans leur conteneur visuellement. Alors que sous IE ca marche !!!
Comment faire ?
Je vous donne mon code :
Le fichier XHTML:
et le fichier CSS qui va bien :
Je sais c'est surement un sujet déjà débattu maintes fois mais j'ai bien lu plein de choses et j'ai pas trouvé de réponses !!
Donc sur mon site je voudrais avoir un menu horizontal en haut de la page avec des sous menus qui se déroulent au passage de la souris. Jusqu'ici tout va bien grâce aux tutoriaux de alsacreations.
Mais le problème du au positionement float c'est que forcement mes différents items de menu ne sont visuellement pas dans le conteneur. Donc pour régler cela je décide d'appliquer la propriete overflow:auto au conteneur.
Youpi ca marche mais seulement sous Firefox !
Car sous IE ca me mets un ascenceur minuscule a droite.
Donc toujours pas découragé je sors ma deuxieme feinte de l'ours la balise <hr /> Avec les proprietes clear:both et visibility:hidden;
Seul problème c'est que sous Firefox mes items de menu ne sont toujours pas dans leur conteneur visuellement. Alors que sous IE ca marche !!!
Comment faire ?
Je vous donne mon code :
Le fichier XHTML:
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');" title="Le menu club">Le Club</dt>
<dd id="smenu1">
<ul>
<li><a title="Les chevaux du club" href="index.php?adresse=chevaux">Les Chevaux</a></li>
<li><a title="Les installations du club" href="index.php?adresse=installations">Les Installations</a></li>
<li><a title="L'histoire de l'USMT Equitation" href="index.php?adresse=histoire">L'Histoire</a></li>
<li><a title="Les anciens chevaux du club" href="index.php?adresse=anciens_chevaux">Anciens Chevaux</a></li>
<li><a title="Un plan d'acces au club" href="index.php?adresse=acces">Plan d'Acces</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');" title="Le menu competition">La Compétition</dt>
<dd id="smenu2">
<ul >
<li><a title="Les résultats en CSO" href="index.php?adresse=articles&categ=cso">CSO</a></li>
<li><a title="Les résultats en dressage" href="index.php?adresse=articles&categ=dressage">Dressage</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');" title="Le menu animations">Les Animations</dt>
<dd id="smenu3">
<ul >
<li><a title="Les soirées organisées par le club" href="index.php?adresse=articles&categ=soirees">Les Soirées</a></li>
<li><a title="Les animations diverses" href="index.php?adresse=articles&categ=divers">Divers</a></li>
<li><a title="Le programme des activitées" href="index.php?adresse=articles&categ=animations">Programme</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');" title="Le menu administration">L'Administration</dt>
<dd id="smenu4">
<ul >
<li><a title="Les messages du bureau" href="index.php?adresse=articles&categ=bureau">Le Bureau</a></li>
<li><a title="Les horaires des reprises" href="index.php?adresse=reprises">Les Reprises</a></li>
<li><a title="Les tarifs de l'USMT" href="index.php?adresse=tarifs">Les Tarifs</a></li>
<li><a title="Le reglement de l'USMT" href="index.php?adresse=reglement">Le Règlement</a></li>
<li><a title="Le contenu du forfait de l'USMT" href="index.php?adresse=forfait">Le Forfait</a></li>
</ul>
</dd>
</dl>
<hr />
</div>
et le fichier CSS qui va bien :
/* Menu */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: 550px;
}
#menu {
background-color:#CCCC99;
z-index:100;
width: 780px;
height:auto;
/*text-align:center;*/
border:1px solid #000;
overflow:auto;
}
#menu dl {
float: left;
width: 106px;
font-weight: 550px;
}
#menu dt {
cursor: pointer;
text-align: center;
background-color:#CCCC99;/* beige moyen */
margin: 1px;
width: 106px;
color:#75700B;/* Bronze */
font: 12px Verdana, Arial, Helvetica, sans-serif;
font-weight: 550px;
}
hr{
clear : both;
display : none;
}
#menu dd {
display: none;
border: 0px;
border-left: 1px #cccc99; /* beige moyen */
border-left-style: outset ;
border-bottom:1px #e5e8c7;/* beige clair */
border-bottom-style:solid;
border-right: 1px #b4b464; /* beige fonce */
border-right-style: inset;
background: #E5E8C7; /* beige clair */
position:absolute;
width: 106px;
font-weight: 550px;
}
#menu dt a:Hover {
color:#FFFFFF; /* blanc */
font-weight: 550px;
}
#menu li {
text-align: left;
background-color:#E5E8C7; /* beige clair */
}
#menu li a {
color: #9F991C; /* or */
font-weight: 400;
text-decoration: none;
background-color:#E5E8C7; /* beige clair */
text-align: left;
margin-left: 5px;
font-weight: 550px;
}
#menu dt a {
color: #75700B; /* Bronze */
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: 550px;
}
#menu li a:hover, #menu li a:focus{
color:#75700B; /* Bronze */
font-weight: 550px;
}