Dit is een tutorial over hoe je pure CSS drop down menu maken zonder javascript. Ik merkte echter dat mensen vaak JavaScript gebruiken om dit effect te bereiken. Eigenlijk is er een eenvoudige manier om dit te doen alleen met CSS.

Hier is het voorbeeld

Stap als eerste: we creëren een eenvoudige HTML-structuur.

 > <h1> Developer's Paradise demos </h1> <ul id = "menu" > <li> <span> Home </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> About Us </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> Products </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> </ul> </div> <Div id = "header"> <h1> Developer's Paradise demo's </ h1> <ul id = "menu"> <li> <span> Home </ span> <ul> <li> <a href = "#" > Menu-item 1 </ a> </ li> <li> <a href = "#"> Menu-item 2 </ a> </ li> <li> <a href = "#"> Menu-item 3 </ a> </ li> </ ul> </ li> <li> <span> Over ons </ span> <ul> <li> <a href = "#"> Menu-item 1 </ a> </ li > <li> <a href = "#"> Menu-item 2 </ a> </ li> <li> <a href = "#"> Menu-item 3 </ a> </ li> </ ul> < / li> <li> <span> Producten </ span> <ul> <li> <a href = "#"> Menu-item 1 </ a> </ li> <li> <a href = "#"> menu-item 2 </ a> </ li> <li> <a href = "#"> Menu-item 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Stap tweede: Nu maken we magische CSS-code

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

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

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

 # Header {
 ; height: 120px; position: relative;
 ; achtergrond: # 333;
 }

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

 # Menu> li {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 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 li ul {
 margin: 0px;
 padding: 0px;
 display: none;
 }
 # Menu li ul li {
 list-style-type: none;
 ; margin: 10px 0 0 0;
 font-size: 11px;
 }

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

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

 # Menu li {span
 cursor: pointer;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; color: # fff; font-size: 11px;
 } 

Let op dat deze code niet werkt in IE6 (dit arme browser gewoon niet weet wat ul> li betekent).

Ik zou dankbaar zijn als u zou kunnen nemen een tweede om mijn blog en aandeel te bevorderen op deze link met een van uw gewenste netwerksites via de link hieronder. Hier is een link naar onze voorkeur site als je wilt registreren van een domein naam .

Geplaatst onder: Css , Tutorials door admin