Menu Navigasi Dropdown Dengan CSS

Iseng pagi-pagi posting cara membuat menu navigasi dropdown dengan CSS, kali ini saya akan mengulas tentang cara bagaimana membuat menu dropdown dengan css dan menurut saya ini sangat mudah dan tidak rumit.

Preview :

Cara Membuat Menu Navigasi Dropdown Dengan CSS

Langkah 1

• Login ke Blogger

Langkah 2

• Masuk ke "Rancangan - Edit HTML"

Langkah 3

• Cheklist "Expand Template Widget"

Langkah 4

• Cari kode berikut ini: ]]></b:skin>

Langkah 5

• Letakkan kode dibawah ini diatas kode langkah 4

/*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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxfVauWSvVx4xR1MCzBmsr25VjU7QXC8aeQeRdoStB_SAMH08LgpiSoSIwUamDPG2VAbJikbnQjCfaSiOKH6yosCXA06cc-EaeApXbWCIxwnm2-TEbhuWItUTGjc7qWRPpRd-dH9gkibTM/s1600/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81x2Zxd1r_RmYmbS1Yxfwj2yXOA6qee0oMMmA_rFgOeqlZGO5OMi0oZ7dx2mh7zoy_FGtaoveCjqYDo5bcORQ5K3kWqNhhIBO3m6A_h2OSEB0_qwzI04vsGwMnIKdSaRyAMZclE6qGaNk/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

Klik Simpan Template.

Langkah 6

• Masuk ke "Tata Letak - Elemen Laman"

• Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"

• Masukan (copypaste) kode dibawah ini pada bagian konten dan letakkan pada bagian Header

<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="mailto:nama@domain.com">Contact</a></li>
</ul>
</div>

Sekian dari saya semoga berhasil dan Sukses