Bu bir javascript kullanmadan menüyü aşağı saf CSS Bırak oluşturmak için öğretici olduğunu. İnsanların çoğu bu etkiyi elde etmek için JavaScript kullanan, ancak fark ettim. Aslında, sadece CSS ile bunu yapmak için basit bir yolu yoktur.

Burada bir örnek

İlk Adım: biz bir temel HTML yapısını oluşturun.

  > <Div id = "header>
 <h1> Developer's Paradise demolar </ h1>
 > <Ul id = "menüsünden">
 <li> <span> Ana Sayfa </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menü öğesi 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> > Hakkımızda </ span
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menü öğesi 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Ürünler </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu item 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menü öğesi 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Font> 

İkinci Adım: Şimdi biz sihirli CSS kodunu oluşturmak

  ; 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 {
 ; height: 120px; position: relative;
 ; background: # 333;
 }

 # Menüsünden {
 margin: 0px;
 padding: 0px;
 position: absolute;
 ; top: 70px;
 display: block;
 }

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

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

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

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

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

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

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

(Bu zavallı tarayıcı sadece bilmiyor ne ul> li anlamındadır) bu kodu IE6 çalışmıyor lütfen unutmayın.

sen benim blog ve paylaşmak için aşağıdaki bağlantıyı kullanarak tercih ağ sitelerinden herhangi birini bu bağlantıyı desteklemek için ikinci bir sürebilir ben minnettar olacaktır. için için dilerseniz bizim tercih edilen site bağlantı Burada bir adı kaydı Alan .

under: Css , Rehberler admin