Detta är en handledning om hur man skapar ren CSS Drop down meny utan att använda javascript. Jag märkte dock att människor ofta använder JavaScript för att uppnå denna effekt. Egentligen finns det ett enkelt sätt att göra det bara med CSS.

Här är exempel

Steg först: vi skapar en grundläggande HTML struktur.

 > <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 demos </ h1> <ul id = "Meny"> <li> <span> Hem </ span> <ul> <li> <a href = "#" > Menyalternativ 1 </ a> </ li> <li> <a href = "#"> menyrad 2 </ a> </ li> <li> <a href = "#"> Menyalternativ 3 </ a> </ li> </ ul> </ li> <li> <span> Om oss </ span> <ul> <li> <a href = "#"> Menyrad 1 </ a> </ li > <li> <a href = "#"> menyrad 2 </ a> </ li> <li> <a href = "#"> Menyalternativ 3 </ a> </ li> </ ul> < / li> <li> <span> Produkter </ span> <ul> <li> <a href = "#"> Menyrad 1 </ a> </ li> <li> <a href = "#"> Menyalternativ 2 </ a> </ li> <li> <a href = "#"> Menyalternativ 3 </ a> </ li> </ ul> </ li> </ ul> </ div> 

Steg andra: nu skapar vi magi CSS-koden

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

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

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

 # Header {
 ; höjd: 120px; position: relative;
 ; Bakgrund: # 333;
 }

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

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

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

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

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

 # Meny li ul li a {
 display: block;
 ; padding: 10px 5px;
 ; färg: # fff;
 text-decoration: none;
 font-weight: bold;
 }

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

 # Meny li span {
 cursor: pointer;
 ; margin: 0px 10px;
 font-weight: bold;
 ; font-size : 11px ; färg: # FFF, font-size: 11px;
 } 

Observera att denna kod inte fungerar i IE6 (denna stackars webbläsare vet bara inte vad ul> li medel).

Jag skulle vara tacksam om du kunde ta en andra för att främja min blogg och dela den här länken med någon av dina gynnade nätverkssajter via länken nedan. Här är en länk till vår bästa sida om du vill registrera ett domännamn .

Filed under: Css , Tutorials av admin