Dette er en tutorial om hvordan man skaber rene CSS Drop down menu uden brug af javascript. Jeg bemærkede dog, at folk ofte bruger JavaScript til at opnå denne effekt. Faktisk er der en simpel måde at gøre det kun med CSS.

Her er eksempel

Trin først: vi skaber en grundlæggende HTML struktur.

  > <Div id = "header">
 <h1> Developer's Paradise demoer </ h1>
 > <Ul id = "menu">
 <li> <span> Home </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menupunkt 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menupunkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menupunkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Om os </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menupunkt 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menupunkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menupunkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Produkter </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menupunkt 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menupunkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menupunkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Trin andet: Nu skal vi skabe magi CSS kode

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

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

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

 # Header {
 ; Højde: 120px; holdning: relativ;
 ; Baggrunden: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 holdning: absolut;
 ; top: 70px;
 display: block;
 }

 # Menu> li {
 list-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 position: relative;
 padding: 10px;
 bredde: 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;
 ; farve: # fff;
 tekst-dekoration: none;
 font-weight: bold;
 }

 a { # Menu li ul li: hover en {
 ; 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 ; farve: # fff; font-size: 11px;
 } 

Bemærk, at denne kode ikke virker i IE6 (denne fattige browser bare ikke ved, hvad ul> li midler).

Jeg ville være taknemmelig, hvis du kunne tage en anden til at fremme min blog og dele dette link med nogen af ​​dine stillede netværkssider via linket nedenfor. Her er et link til vores foretrukne websted, hvis du ønsker at registrere et domænenavn .

Filed under: Css , Tutorials af admin