Salut 
Je vous partage le code source de mon menu déroulant fait par moi même.
Il est coder en HTML et CSS http://reality-gaming.fr/attachments/edition-png.20322/.
Il y a quelques commentaires dans le CSS pour vous
repérer.
Je vous partage le code source de mon menu déroulant fait par moi même.
Il est coder en HTML et CSS http://reality-gaming.fr/attachments/edition-png.20322/.
Il y a quelques commentaires dans le CSS pour vous
repérer.
HTML:
<div id="conteneur-menu">
<div id="menu">
<a href="#"><dl>
<dt>#</dt>
</dl></a>
<dl>
<dt>#</dt>
<dd>
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</dd>
</dl>
<a href="#"><dl>
<dt>#</dt>
</dl></a>
<a href="#"><dl>
<dt>#</dt>
</dl></a>
<dl id="adroite">
<dt>#</dt>
<dd>
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li class="profil"><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</dd>
</dl></div>
</div>
</div>Et maintenant le CSS.
Code:
#menu[/COLOR][/LEFT][/COLOR][/LEFT][/COLOR][/LEFT][/COLOR][/LEFT][/COLOR][/LEFT][/COLOR][/LEFT]
[COLOR=rgb(0, 0, 0)]
[LEFT][COLOR=rgb(0, 0, 0)]
[LEFT][COLOR=rgb(0, 0, 0)]
[LEFT][COLOR=rgb(0, 0, 0)]
[LEFT][COLOR=rgb(0, 0, 0)]
[LEFT][COLOR=rgb(0, 0, 0)]
[LEFT]{
background-color: #333333; /* la couleur du menu*/
height: 40px;
}
dl
{
height: 40px;
display: block;
margin: 0; padding: 0;
float: left;
}
dt
{
width: 110px; /* l'épaisseur des block du menu*/
display: block;
height: 40px; /*ne surtout pas toucher*/
color: white; /* couleur du texte sur le menu*/
line-height: 40px;
text-align: center;
border-right: 1px solid white ; /* les bordures*/
cursor: default; /* la cuseur va devenir la main au passage de la souris */
}
dd
{
display: block;
margin: 0; padding: 0;
background-color: #333333;
}
dd ul
{
margin: 0; padding: 0;
text-align: center;
list-style: none;
}
dd ul li
{
display: block;
margin: 0; padding: 0;
}
dd ul li a
{
color: white; /*couleur du sous menu*/
display: block;
text-decoration: none;
width: 110px;
height: 30px;
line-height: 30px;
border-top: 1px solid white ;
border-bottom: 1px solid silver ;
}
dd ul li a:hover /* la couleur de fond au passage de la souris (pour les sous-menus) */
{
background-color: #338888;
color: white;
}
dt:hover
{
background-color: #338888;
color: white;
}
dl dd
{
display: none;
}
dl:hover dd
{
display: block;
}
#conteneur-menu
{
background-color: silver;
height: 40px;
position: relative;
}
#adroite
{
position: absolute;
right: 0px;
border-left: 1px solid white;
}Si vous avez un problème ou une question n'hésitez pas à me demandé http://reality-gaming.fr/attachments/reponses-png.20332/
Dernière édition:
