Dies ist eine Anleitung, wie man reines CSS Drop Down-Menü ohne Javascript erstellen. Ich bemerkte jedoch, dass die Menschen oft JavaScript verwenden, um diesen Effekt zu erzielen. Eigentlich gibt es einen einfachen Weg, um es nur mit CSS zu tun.

Hier ist das Beispiel

Schritt zuerst: Wir erstellen eine einfache HTML-Struktur.

  > <Div id = "header">
 <h1> Developer's Paradise Demos </ h1>
 > <Ul id = "Menü">
 <li> <span> Home </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menüpunkt 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menüpunkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menüpunkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Über uns </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menüpunkt 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menüpunkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menüpunkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Produkte </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menüpunkt 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menüpunkt 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menüpunkt 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Schritt zweite: Nun erstellen wir Magie CSS-Code

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

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

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

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

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

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

 ul { # Menü> li: hover ul {
 display: block;
 }

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

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

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

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

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

Bitte beachten Sie, dass dieser Code nicht im IE6 Arbeit (diese arme Browser einfach nicht wissen, was ul> li bedeutet).

Ich wäre dankbar, wenn Sie eine zweite könnte zu promoten Blog und teilen Sie diesem Link mit einem der Ihren gewünschten Networking-Sites über den Link unten. Hier ist ein Link zu unserem bevorzugten Standort, wenn Sie wollen Namen eine Domain registrieren .

Abgelegt unter: Css , Tutorials von admin