Cara Mudah membuat Dropdown Menu CSS3

Tips blog - Cara Mudah membuat Dropdown Menu CSS3. Sobat blogger ingin membuat menu dropdown yang keren dan mudah cara membuatnya ?  Kalau begitu pakai saja dropdown menu CSS3 berikut ini.  Menu adalah cara terbaik untuk mengatur link penting di blog sobat agar terlihat rapi, dan CSS3 Menu juga membantu pembaca untuk menavigasi melalui blog dengan mudah.

Untuk Membuat CSS3 Drop Down Menu  ini juga sangatlah mudah, untuk caranya sobat bisa ikuti instruksi berikut ini:

1. Pergi ke Akun blogger.

2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget.

3. Pilih elemen HTML/Java Script.

4. Lalu copy kode css berikut dan letakkan ke dalam elemen HTML/Java Script tadi.

<style> /*Start Css Menu*/

.menu {

    border: none;

    border: 0px;

    margin: 0px;

    padding: 0px;

    font-family: verdana,geneva,arial,helvetica,sans-serif;

    font-size: 14px;

    font-weight: bold;

    color: 8e8e8e;

}

.menu ul {

    background: url(http://2.bp.blogspot.com/-NOVtmV9lxuE/UCZNmejN9UI/AAAAAAAAFcQ/MU7WpM3s7So/s1600/otowebsite.blogspot.com-menu-bg.gif) top left repeat-x;

    height: 43px;

    list-style: none;

    margin: 0;

    padding: 0;

}

.menu li {

    float: left;

    padding: 0px 8px 0px 8px;

}

.menu li a {

    color: #666666;

    display: block;

    font-weight: bold;

    line-height: 43px;

    padding: 0px 25px;

    text-align: center;

    text-decoration: none;

}

.menu li a:hover {

    color: #000000;

    text-decoration: none;

}

.menu li ul {

    background: #e0e0e0;

    border-left: 2px solid #a80329;

    border-right: 2px solid #a80329;

    border-bottom: 2px solid #a80329;

    display: none;

    height: auto;

    filter: alpha(opacity=95);

    opacity: 0.95;

    position: absolute;

    width: 225px;

    z-index: 200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul {

    display: block;

}

.menu li li {

    display: block;

    float: none;

    padding: 0px;

    width: 225px;

}

.menu li ul a {

    display: block;

    font-size: 12px;

    font-style: normal;

    padding: 0px 10px 0px 15px;

    text-align: left;

}

.menu li ul a:hover {

    background: #949494;

    color: #000000;

    opacity: 1.0;

    filter: alpha(opacity=100);

}

.menu p {

    clear: left;

}

.menu #current {

    background: url(http://3.bp.blogspot.com/-Fft27etqbw0/UCZNlU_33RI/AAAAAAAAFcI/EfJ2rskRq5M/s1600/otowebsite.blogspot.com-current-bg.gif) top left repeat-x;

    color: #ffffff;

}

/*End Css Menu from http://www.otowebsite.blogspot.com/*/

</style>

<div class="menu">

 <ul>

  <li><a href="#" id="current">Home</a></li>

  <li><a href="#">Products</a>

  <ul>

   <li><a href="#">Drop Down CSS Menus</a></li>

   <li><a href="#">Horizontal CSS Menus</a></li>

   <li><a href="#">Vertical CSS Menus</a></li>

   <li><a href="#">Dreamweaver Menus</a></li>

  </ul>

  </li>

  <li><a href="#">FAQ</a>

  <ul>

   <li><a href="#">Drop Down CSS Menus</a></li>

   <li><a href="#">Horizontal CSS Menus</a></li>

   <li><a href="#">Vertical CSS Menus</a></li>

   <li><a href="#">Dreamweaver Menus</a></li>

  </ul>

  </li>

  <li><a href="#">Contact</a></li>

  <li><a href="#">Create This</a></li>

 </ul>

</div>​

5. Sebelum menyimpan sebaiknya Anda lakukan sedikit perubahab pada css di atas.

Sekarang ganti tanda # dengan link Anda sendiri.
Mengganti teks menu dengan teks menu Anda sendiri yang ingin ditampilkan pada menu.

Mudah kan sob cara membuatnya ? Cukup sekian dulu tips blog kali ini, Cara Mudah membuat Dropdown Menu CSS3.

Semoga Bermanfaat.


Script : otowebsite.blogspot.com

Share this post