Dalam posting ini saya akan berbagi Css menu drop down untuk Blogger. Cara penerapan nya cukup mudah karena hanya menggunakan Css bukan jQuery sehingga tidak ada script atau tambah waktu buka ke blog Anda dan lebih mudah untuk implement dan menu telah diuji ke IE6 hasilnya cukup memuaskan. berikut  screenshot, demo dan penerapan nya di bawah ini.

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtL0TEZ3B0IqCQJVmKbIzwdlbAdnRRhsoUQc3h-UIXpSKwYiTo7-c4KTprMATwO6Xl6kpd2DUvo_6Q4G9Cc2IWbnxhULzqTszDxhxcMa1i4wl5Ae8sJYwnD7RDfb_VTNHM16YH1S4zn9ci/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}

.nav .table {
display:table;
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtL0TEZ3B0IqCQJVmKbIzwdlbAdnRRhsoUQc3h-UIXpSKwYiTo7-c4KTprMATwO6Xl6kpd2DUvo_6Q4G9Cc2IWbnxhULzqTszDxhxcMa1i4wl5Ae8sJYwnD7RDfb_VTNHM16YH1S4zn9ci/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}


.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiulw7UUxZ8CoMw0dgSOk8fi58mTMvYVQ00151nOXm0rYghJx9CV1q3hahBWtgEHF48UpAHPRLPswviOcbc6zcK4zh5HvHKzGARGOz7aidiAO7_tspVqSG9lQCFPBnE3ti-2SzBqkxSWeIA/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}

.nav .select a b{
font-weight:bold;
}

.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiulw7UUxZ8CoMw0dgSOk8fi58mTMvYVQ00151nOXm0rYghJx9CV1q3hahBWtgEHF48UpAHPRLPswviOcbc6zcK4zh5HvHKzGARGOz7aidiAO7_tspVqSG9lQCFPBnE3ti-2SzBqkxSWeIA/s1600/hover.gif) right top;
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}

.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Nlqlmsro4DWcoTvYt4bDpc62-pJUtUR0ibgr7GSBiBcgc48DoNnzncpiTqkimNNXDYHVwHBHlYuwzl1l_EmPMcbhhpk0ae0mhq_MEeRfeQWO1BdqAUUjaYD15XXIi6vQRTbTIz4D8yEc/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}

.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}

.nav .select .sub li a {
font-weight:normal;
}

.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>