kalian bisa copy dan paste pada template - edit html dibawah ini :atas header (dalam edit html)
<nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>
<ul class='menu'>
<li><a class='homer' href='http://milabrukkidul.blogspot.co.id/search/label/home'><i class='fa fa-home'/> HOME</a></li>
<li><a href='#'><i class='fa fa-envelope'/> LIKE US</a>
<ul class='sub-menu'>
<li><a href='#'>Twitter</a></li>
<li><a href='https://www.facebook.com/minurulislamlabrukkidul/?fref=ts/'>Facebook</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-user'/>PERSONALIA</a></li>
<li><a href='#'><i class='fa fa-envelope'/>PKM. KESISWAAN</a>
<ul class='sub-menu'>
<li><a href='#'>Tilawati</a>
<ul>
<li><a href='#'>Sub Sub-Menu 2.1</a></li>
<li><a href='#'>Sub Sub-Menu 2.2</a></li>
<li><a href='#'>Sub Sub-Menu 2.3</a></li>
<li><a href='#'>Sub Sub-Menu 2.4</a></li>
<li><a href='#'>Sub Sub-Menu 2.5</a></li>
</ul>
</li>
<li><a href='#'>Ujian-Ujian</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-camera'/> PORTFOLIO</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Sub-Menu 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><i class='fa fa-bullhorn'/> BLOG</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a></li>
<li><a href='#'>Sub-Menu 3</a></li>
<li><a href='#'>Sub-Menu 4</a></li>
<li><a href='#'>Sub-Menu 5</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-tags'/> CATEGORIES</a>
<ul class='sub-menu'>
<li><a href='#'>Religi</a></li>
<li><a href='#'>Sub-Menu 2</a>
<ul>
<li><a href='#'>Sub Sub-Menu 2.1</a></li>
<li><a href='#'>Sub Sub-Menu 2.2</a></li>
<li><a href='#'>Sub Sub-Menu 2.3</a></li>
<li><a href='#'>Sub Sub-Menu 2.4</a></li>
<li><a href='#'>Sub Sub-Menu 2.5</a></li>
</ul>
</li>
<li><a href='#'>Sub-Menu 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 3.1</a></li>
<li><a href='#'>Sub Sub-Menu 3.2</a></li>
<li><a href='#'>Sub Sub-Menu 3.3</a></li>
<li><a href='#'>Sub Sub-Menu 3.4</a></li>
<li><a href='#'>Sub Sub-Menu 3.5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
PASTE DENGAN JARAK 1 BARIS TEPAT DIATAS ]]></b:skin>
nav {
display: block;
margin-top: 100px;
background: #374147;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: #9ca3da;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer {
background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap {
width: 768px;
}
.menu ul {
top: 37px;
}
.menu li a {
font-size: 12px;
}
a.homer {
background: #374147;
}
}
@media (max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
}
.menu {
display: none;
}
.responsive-menu {
display: block;
margin-top: 100px;
}
nav {
margin: 0;
background: none;
}
.menu li {
display: block;
margin: 0;
}
.menu li a {
background: #fff;
color: #797979;
}
.menu li a:hover,.menu li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}
