COMMENT FAIRE UN MENU DEROULANT

CODE HTML EN BLEU

CODE CSS EN MARRON, placé entre les balises <style > </style> juste derrière

<ul id="menu-deroulant">

CODE

<ul id="menu-deroulant"><style>

#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:#000;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

</style>
	<li><a href="#">Lien menu</a>
		<ul>
			<li><a href="#">lien sous menu</a></li>
			<li><a href="#">lien sous menu</a></li>
			<li><a href="#">lien sous menu</a></li>
			
		</ul>
	</li></ul>

CODE

En remplaçant "Lien menu " par "MES SITES" et les trois liens sous-menu par les liens vers mes sites.

<ul id="menu-deroulant"><style>

#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:#000;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

</style>
	<li><a href="#">MES SITES</a>
		<ul>
			<li><a href="http://www.pecheurdumorin.fr">LA PECHE EN SEINE-ET-MARNE</a></li>
			<li><a href="http://www.naturepourvous.fr">NATURE POUR VOUS</a></li>
			<li><a href="http://www.mytesting.fr">MON SITE INTERNET</a></li>
			
		</ul>
	</li></ul>

RESULTAT

Placer la souris sur "mes sites" puis cliquer sur un élément du sous-menu qui apparait.

• MES SITES
  • LA PÊCHE EN SEINE-ET-MARNE
  • NATURE POUR VOUS
  • MON SITE INTERNET