Mas Pardi Jadul

Berikut tutorial tentang membuat navigasi menu blogger tanpa js, aka pure css, silahkan di modif sesuai selera anda asal jangan lupa untuk share artikel or komentar aja.
Screnshot menu nya dibawah ini



Langsung ke kode and tutorialnya :

Css:

#maspardiijo a,#maspardiijo li,#maspardiijo span,#maspardiijo ul{margin:0;padding:0;position:relative;box-sizing:content-box}#maspardiijo{line-height:1;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#000;background:-moz-linear-gradient(top,#1f1f1f 0,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#1f1f1f),color-stop(100%,#000));background:-webkit-linear-gradient(top,#1f1f1f 0,#000 100%);background:-o-linear-gradient(top,#1f1f1f 0,#000 100%);background:-ms-linear-gradient(top,#1f1f1f 0,#000 100%);background:linear-gradient(to bottom,#1f1f1f 0,#000 100%);border-bottom:2px solid #3ab4a6;width:auto}#maspardiijo ul:after,#maspardiijo:after{content:'';display:block;clear:both}#maspardiijo a{background:#000;background:-moz-linear-gradient(top,#1f1f1f 0,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#1f1f1f),color-stop(100%,#000));background:-webkit-linear-gradient(top,#1f1f1f 0,#000 100%);background:-o-linear-gradient(top,#1f1f1f 0,#000 100%);background:-ms-linear-gradient(top,#1f1f1f 0,#000 100%);background:linear-gradient(to bottom,#1f1f1f 0,#000 100%);color:#fff;display:block;font-family:Helvetica,Arial,Verdana,sans-serif;padding:19px 20px;text-decoration:none}#maspardiijo ul{list-style:none}#maspardiijo.align-center>ul{font-size:0}#maspardiijo>ul>li{display:inline-block;float:left;margin:0}#maspardiijo.align-center{text-align:center}#maspardiijo.align-center>ul>li{float:none}#maspardiijo.align-center ul ul{text-align:left}#maspardiijo.align-right>ul{float:right}#maspardiijo.align-right ul ul{text-align:right}#maspardiijo>ul>li>a{color:#fff;font-size:12px}#maspardiijo>ul>li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #3ab4a6;margin-left:-10px}#maspardiijo>ul>li:first-child>a{border-radius:5px 0 0;-moz-border-radius:5px 0 0;-webkit-border-radius:5px 0 0}#maspardiijo.align-center>ul>li:first-child>a,#maspardiijo.align-right>ul>li:first-child>a{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}#maspardiijo.align-right>ul>li:last-child>a{border-radius:0 5px 0 0;-moz-border-radius:0 5px 0 0;-webkit-border-radius:0 5px 0 0}#maspardiijo>ul>li.active>a,#maspardiijo>ul>li:hover>a{color:#3ab4a6;box-shadow:inset 0 0 3px #000;-moz-box-shadow:inset 0 0 3px #000;-webkit-box-shadow:inset 0 0 3px #000;background:#000;background:-moz-linear-gradient(top,#121212 0,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#121212),color-stop(100%,#000));background:-webkit-linear-gradient(top,#121212 0,#000 100%);background:-o-linear-gradient(top,#121212 0,#000 100%);background:-ms-linear-gradient(top,#121212 0,#000 100%);background:linear-gradient(to bottom,#121212 0,#000 100%)}#maspardiijo .has-sub{z-index:1}#maspardiijo .has-sub:hover>ul{display:block}#maspardiijo .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#maspardiijo.align-right .has-sub ul{left:auto;right:0}#maspardiijo .has-sub ul li a{background:#3ab4a6;border-bottom:1px dotted #58c9bc;font-size:11px;filter:none;display:block;line-height:120%;padding:10px;color:#fff}#maspardiijo .has-sub ul li:hover a{background:#2e8d82}#maspardiijo ul ul li:hover>a{color:#fff}#maspardiijo .has-sub .has-sub:hover>ul{display:block}#maspardiijo .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#maspardiijo.align-right .has-sub .has-sub ul,#maspardiijo.align-right ul ul ul{left:auto;right:100%}#maspardiijo .has-sub .has-sub ul li a{background:#2e8d82;border-bottom:1px dotted #58c9bc}#maspardiijo .has-sub .has-sub ul li a:hover{background:#277a71}#maspardiijo .has-sub ul li.last>a,#maspardiijo .has-sub ul li:last-child>a,#maspardiijo ul ul li.last>a,#maspardiijo ul ul li:last-child>a,#maspardiijo ul ul ul li.last>a,#maspardiijo ul ul ul li:last-child>a{border-bottom:0}

Html:

<div id="maspardiijo">
<ul>
<li><a href="#" target="_blank"><span><i class="fa fa-fw fa-home"></i> Home</span></a></li>
<li class="has-sub"><a href="#"><span><i class="fa fa-fw fa-bars"></i> Sub Menu</span></a>
<ul>
<li><a href="#"><span>Sub menu 2</span></a></li>
<li><a href="#"><span>Sub menu 2</span></a></li>
</ul>
</li>
<li><a href="#"><span><i class="fa fa-fw fa-android"></i> Menu Android</span></a></li>
<li><a href="#"><span><i class="fa fa-fw fa-bell-o"></i> Maspardi</span></a></li>
</ul>
</div>

Font awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Tutorial :

• Masuk ke edit template di blog anda
• Kode CSS letakan diats kode */]]></b:skin> or </style>
• Kode Html letakan diatas atau dibawah kode </header> atau bisa juga dibawah kode <div id='content-wrapper'> (Bebas sesuai selera)
• Simpan Template dan lihat hasilnya.
• Untuk font family sesuaikan sesuai font yang anda gunakan.
• Demo