Il s'agit d'un tutoriel sur la façon de créer pure Drop CSS dans le menu déroulant sans utiliser javascript. J'ai remarqué toutefois que les gens utilisent souvent JavaScript pour obtenir cet effet. En fait, il existe un moyen simple de le faire uniquement avec CSS.

Voici l' exemple

Première étape: nous créons une structure HTML de base.

  > <Div id = "header">
 <h1> Developer's Paradise démos </ h1>
 > <Ul id = "menu">
 <li> <span> Accueil </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu point 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu point 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> propos de nous </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu point 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu point 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> produits </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu point 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu point 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Deuxième étape: maintenant nous créer de la magie code CSS

  ; padding : 0 ; } } * {Margin: 0; padding: 0;

 body {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; police: 100% normal Arial, Helvetica, sans-serif;
 }

 : #fff ; } h1 {color: # FFF;}

 # Header {
 ; Hauteur: 120px; position: relative;
 ; background: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 position: absolute;
 ; top: 70px;
 display: block;
 }

 # Menu li> {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 10px 0px;
 position: relative;
 padding: 10px;
 width: 100px;
 }

 ul { # Menu li>: hover {ul
 display: block;
 }

 { # Menu li>: hover {
 ; background-color: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

 # Menu ul li {
 margin: 0px;
 padding: 0px;
 display: none;
 }
 # Menu ul li li {
 list-style-type: none;
 ; margin: 10px 0 0 0;
 font-size: 11px;
 }

 # Menu ul li li a {
 display: block;
 ; padding: 10px 5px;
 ; couleur: # fff;
 text-decoration: none;
 font-weight: bold;
 }

 a { # Menu ul li li: hover a {
 ; background-color: # 606060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Li span menu {
 cursor: pointer;
 ; margin: 10px 0px;
 font-weight: bold;
 ; font-size : 11px ; couleur: # fff; font-size: 11px;
 } 

S'il vous plaît noter que ce code ne fonctionne pas dans IE6 (ce navigateur pauvre ne sait tout simplement pas ce que signifie ul li>).

Je vous serais reconnaissant si vous pouviez prendre un instant pour aider à promouvoir mon blog et partager ce lien avec l'un de vos sites de réseautage favorisée en utilisant le lien ci-dessous. Voici un lien vers notre site préféré, si vous souhaitez enregistrer un nom de domaine .

Classé sous: Css , Tutoriels par admin