Acesta este un tutorial despre cum să creaţi Drop pur CSS jos meniu fără a utiliza JavaScript. Am observat însă, că oamenii folosesc adesea JavaScript-ului pentru a obţine acest efect. De fapt, există un mod simplu de a face acest lucru doar cu CSS.

Aici este exemplul

Primul pas: am creat o structura de bază HTML.

 > <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 = "antet"> <h1> Demos Developer's Paradise </ h1> <ul id = "menu"> <li> <span> Home </ span> <ul> <li> <a href = "#" > Element de meniu 1 </ a> </ li> <li> <a href = "#"> Meniu punctul 2 </ a> </ li> <li> <a href = "#" Meniu> punctul 3 </ a> </ li> </ ul> </ li> <li> <span> Despre noi </ span> <ul> <li> <a href = "#"> Element de meniu 1 </ a> </ li > <li> <a href = "#"> Meniu punctul 2 </ a> </ li> <li> <a href = "#" Meniu> punctul 3 </ a> </ li> </ ul> < / li> <li> <span> Produse </ span> <ul> <li> <a href = "#"> Element de meniu 1 </ a> </ li> <li> <a href = "#"> elementul de meniu 2 </ a> </ li> <li> <a href = "#" Meniu> punctul 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Al doilea pas: acum am crea cod magie CSS

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

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

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

 # Header {
 ; înălţime: 120px; poziţia: relative;
 ; background: # 333;
 }

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

 # Meniu li> {
 Lista-style-type: none;
 float: left;
 display: block;
 ; margin: 0px 10px;
 poziţia: relativă;
 padding: 10px;
 lăţimea: 100px;
 }

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

 { # Meniu> li: hover {
 ; background-color: # 808080;
 -Moz-transfrontaliere-raza: 10px;
 Transfrontalieră-WebKit-raza: 10px;
 }

 # Meniu li UL {
 margin: 0px;
 padding: 0px;
 display: none;
 }
 # Meniu li ul li {
 Lista-style-type: none;
 ; margin: 10px 0 0 0;
 font-size LITERA: 11pixeli;
 }

 # Meniu li ul li {o
 display: block;
 ; padding: 10px 5pixeli;
 ; color: # fff;
 text-decorare: nici unul;
 font-weight: bold;
 }

 a { # Meniu li ul li: hover o {
 ; background-color: # 606060;
 -Moz-transfrontaliere-raza: 5pixeli;
 Transfrontalieră-WebKit-raza: 5pixeli;
 }

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

Vă rugăm să reţineţi că acest cod nu funcţionează în IE6 (acest browser săraci pur şi simplu nu ştiu ce înseamnă ul> Li).

V-aş fi recunoscător dacă aţi putea să ia un al doilea pentru a ajuta la promovarea blog-ul meu şi a cotei de această legătură cu orice de site-uri de reţea favorizat folosind link-ul de mai jos. Aici este un link către site-ul nostru preferat, dacă doriţi să înregistraţi un nume de domeniu .

Filed under: Css , Tutoriale de admin