Mas Pardi Jadul

Berikut ialah tutorial cara membuat menu menggunakan css tanpa menggunakan java script, meskipun terlihat jelek, atau bahkan tidak terlalu keren untuk design menu nya, tapi tentunya bagi penggila Fast Loading pasti pengen mencoba untuk menggunakan menu yang tidak membebani loading blog.

Berikut tutorialnya  (Gunakan Ctrl+C untuk copas :

CSS :

/* Base Styles */
#menumaspardi2sub > ul,
#menumaspardi2sub > ul li,
#menumaspardi2sub > ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#menumaspardi2sub > ul {
position: relative;
z-index: 597;
float: left;
}
#menumaspardi2sub > ul li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
padding: 10px;
}
#menumaspardi2sub > ul li.hover,
#menumaspardi2sub > ul li:hover {
z-index: 599;
cursor: default;
}
#menumaspardi2sub > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}
#menumaspardi2sub > ul ul li {
float: none;
}
#menumaspardi2sub > ul li:hover > ul {
visibility: visible;
}
#menumaspardi2sub > ul a:link {
text-decoration: none;
}
#menumaspardi2sub > ul a:active {
color: #ffa500;
}
#menumaspardi2sub li {
padding: 0;
color: #000;
}
#menumaspardi2sub {
font-family: 'Lato', sans-serif;
width: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: #000000;
font-size: 14px;
-moz-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
}
#menumaspardi2sub > ul {
padding: 0 5px;
-moz-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: block;
float: none;
zoom: 1;
}
#menumaspardi2sub > ul:before {
content: '';
display: block;
}
#menumaspardi2sub > ul:after {
content: '';
display: table;
clear: both;
}
#menumaspardi2sub > ul > li {
padding: 8px 5px;
}
#menumaspardi2sub > ul > li > a,
#menumaspardi2sub > ul > li > a:link,
#menumaspardi2sub > ul > li > a:visited {
text-shadow: 0 -1px 1px #000000;
color: #fff;
padding: 7px 20px;
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
#menumaspardi2sub > ul > li > a:hover,
#menumaspardi2sub > ul > li:hover > a {
background-color: #000000;
}
#menumaspardi2sub li li a {
color: #8b8b8b;
font-size: 13px;
}
#menumaspardi2sub li li a:hover {
color: #444444;
border-color: #444444;
}
#menumaspardi2sub ul ul {
margin: 0 10px;
padding: 0 10px;
float: none;
background: #ffffff;
border: 2px solid #000000;
border-top: none;
right: 0;
left: 0;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
#menumaspardi2sub ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
#menumaspardi2sub ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#menumaspardi2sub ul > li > ul > li.has-sub > a:before {
content: '';
position: absolute;
top: 18px;
right: 6px;
border: 5px solid transparent;
border-top: 5px solid #8b8b8b;
}
#menumaspardi2sub ul > li > ul > li.has-sub > a:hover:before {
border-top: 5px solid #444444;
}
#menumaspardi2sub ul ul ul {
width: 200px;
top: 100%;
border: 2px solid #000000;
}
#menumaspardi2sub ul ul ul li {
float: none;
}

HTML :

<div id="menumaspardi2sub">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li class="has-sub"><a href="#"><i class="fa fa-fw fa-sort-desc"></i> Sub Menu 1</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub menu</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-fw fa-rss"></i> Menu Anda</a></li>
<li><a href="#"><i class="fa fa-fw fa-plus-square-o"></i> Menu Anda</a></li>
</ul>
</div>

Font Awesome pastikan sudah ada di template anda

Demo Menu