Membuat Menu Dropdown

Menu dropdown anda pasti sudah tahu kan nah sekarang saya mau posting tentang pembuatannya tetapi menggunakan CSS yang nantinya lebih simple dan membuat tampilan tidak terlalu banyak menu oleh karena itu silahkan deh simak dibawah ini scift css yang akan saya buat untuk anda, inget simpan dengan style.css

yah seperti biasa ayo kita lihat kodenya dibawah ini:

---------------------------------------------------------------------------------------------------------

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    position: relative;
    float: left;
        width: 100px;

}
li ul {
    position: absolute;
    top: 30px;
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    line-height: 20px;
    color: #000;
    padding: 5px;
    background: #CC0;
    margin: 0 2px;
}

ul li a:hover { background: #66F; }
li:hover ul, li.over ul { display: block; }
------------------------------------------------------------------------------------------------------

dan kemudian buatlah dokumen html (hipertext markup language) ini contoh scriftnya dan simpan sesuai keinginan anda tetapi inget tetap berekstensi html okey...

------------------------------------------------------------------------------------------------------

<link href="style.css" rel="stylesheet" type="text/css">

<ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">Portfolio</a>
      <ul>
        <li><a href="">Web Design</a></li>
        <li><a href="">Web Programming</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Mobile</a></li>
      </ul>
    </li>
    <li><a href="">Post Feed</a>
      <ul>
        <li><a href="">Via Web</a></li>
        <li><a href="">Via Phone</a></li>
        <li><a href="">Via RSS</a></li>
      </ul>
    </li>
   
</ul>

------------------------------------------------------------------------------------------------------

Oke deh para sobat blogger silahkan anda buka dengan browser dan lihat hasilnya okey cekidot...

Baca juga artikel ini: