Bagi para sobat blogger yang tampilan blognya ingin dipercantik dengan menu horizontal dengan fasilitas dropdownmenu, silahkan ikutin langkah-langkah di bawah ini:
/*------ Free Horizontal Header drop down menu----- */
.menu {
position: relative;
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
height: 0px;
width: auto;
list-style: none;
font-size: 1.50em;/*...Mengubah Besar huruf Submenu...*/
text-transform:capitalize;
background:#66CC00 url(http://dc699.4shared.com/img/soByh9yz/s7/1406aa68280/green.png?async&rand=0.8040044330991805) repeat-x;-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border:4px solid #00dd77; padding:0px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:4px solid #00dd77; padding:0px;
}
.menu {
padding:0;
margin:0;
list-style:none;
height:45px;
position:relative;
z-index:5;
font-family:sans-serif;
}
.menu a:hover{
background:#fff;
background-color:#7CFC00;-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border:2px solid #7CFC00; padding:0px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:2px solid #7CFC00; padding:0px;
cusor:pointer;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:45px;
line-height:40px;
color:#fff;
text-decoration:none;
font-family:sans-serif;
font-size:18px; /* Mengubah Besar Huruf */
font-weight:bold;
padding:0 0 0 14px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#00BFFF; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background: #66CC00 url() repeat-x;-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border:2px solid #7CFC00; padding:0px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:2px solid #7CFC00; padding:0px; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:40px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:40px;
width:200px;
line-height:40px;
text-indent:5px;
color:#fff;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* …. Free Submenu Background Color…. */
background:#66CC00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZqBtTgUblwq-InFeicGek2scX95Au9AumzX7L2MFC4aO07u1KoLKvY7-SDE_1r170N1jKysM4HX0IEJJxQqriUIhH-Egi2ogii_CqIfDHHUbwKaSe4tNbqhwbboV-sQpAOKK4BxGJ8s/s1600/arrow_over.gif) 185px 10px no-repeat;-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border:2px solid #7CFC00; padding:0px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:2px solid #7CFC00; padding:0px;}
.menu li:hover ul.sub li a:hover {
background:#7CFC00;-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border:2px solid #7CFC00; padding:0px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:2px solid #7CFC00; padding:0px; /* Background Color on mouseover */
color:#00BFFF;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#7CFC00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZqBtTgUblwq-InFeicGek2scX95Au9AumzX7L2MFC4aO07u1KoLKvY7-SDE_1r170N1jKysM4HX0IEJJxQqriUIhH-Egi2ogii_CqIfDHHUbwKaSe4tNbqhwbboV-sQpAOKK4BxGJ8s/s1600/arrow_over.gif) 185px 10px no-repeat;-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border:2px solid #7CFC00; padding:0px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:2px solid #7CFC00; padding:0px; color:#00BFFF;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #66CC00 url() repeat-x;-webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border:2px solid #7CFC00; padding:0px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:2px solid #7CFC00; padding:0px; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Menu I</span></a>
<ul class='sub'>
<li><a class='fly' href='Link URL'>Sub Menu I</a><ul>
<li><a href='#'>Sub Menu I.1a</a></li>
<li><a href='#'>Sub Menu I.2b</a></li>
</ul>
</li>
<li><a href='#'>Sub Dropdown I.2</a></li>
<li><a href='#'>Sub Dropdown I.3</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Menu 2</span></a>
<ul class='sub'>
<li><a class='fly' href='Link URL'>Sub Menu 2.1</a><ul>
<li><a href='#'>Sub Menu 2.1a</a></li>
<li><a href='#'>Sub Menu 2.1b</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Sub Menu 2.2</a>
<ul>
<li><a href='#'>Sub Menu 2.2a</a></li>
<li><a href='#'>Sub Menu 2.2b</a></li>
</ul>
</li>
<li><a href='#'>Sub Menu 2.3</a></li>
<li><a href='#'>Sub Menu 2.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Menu 3</span></a>
<ul class='sub'>
<li><a href='#'>Sub Menu 3.1</a></li>
<li><a href='#'>Sub Menu 3.2</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Menu 4</span></a>
<ul class='sub'>
<li><a href='#'>Sub Menu 4.1</a></li>
<li><a href='#'>Sub Menu 4.2</a></li>
<li><a href='#'>Sub Menu 4.3</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Menu 5</span></a>
<ul class='sub'>
<li><a href='#'>Sub Menu 5.1</a></li>
<li><a href='#'>Sub Menu I</a></li>
<li><a href='#'>Sub Menu 5.2</a></li>
<li><a href='#'>Sub Menu 5.3</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Menu 6</span></a>
<ul class='sub'>
<li><a href='#'>Sub Menu 6.1</a></li>
<li><a href='#'>Sub Menu 6.2</a></li>
<li><a href='#'>Sub Menu 6.3</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Menu 7</span></a>
<ul class='sub'>
<li><a href='#'>Sub Menu 7.1</a></li>
<li><a href='#'>Sub Menu 7.2</a></li>
<li><a href='#'>Sub Menu 7.3</a></li>
<li><a href='#'>Sub Menu 7.4</a></li>
<li><a href='#'>Sub Menu 7.5</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Menu 8</span></a>
<ul class='sub'>
<li><a href='#'>Sub Menu 8.1</a></li>
<li><a href='#'>Sub Menu 8.2</a></li>
<li><a href='#'>Sub Menu 8.3</a></li>
</ul>
</li>
</ul>
</div>
<div class='navwrapspace‘/>
Penting! Jangan lupa save seluruh template kalian sebelum melakukan langkah-langkah diatas, menjaga terjadinya kesalahan. Selamat mencoba sob. Cek it dot….
