Cara Membuat Menu Navigasi Blog Dengan CSS Keren Terbaru 2018

pada kesempatan kali ini admin membagikan cara membuat menu navigasi tentunya dengan css agar tampilan menu navigasi yang di buat terlihat keren, untuk para blogger menu navigasi sangat di perlukan di karenakan agar mempermudah engunjung dalam menjelajah isi blog kita. menu navgasi 2018 ini adalah menu navigasi keren dengan versi paling baru. langsung saja.

1. masuk ke blogger.com kemudian pilih menu tema/template kemudian edit html.

2. copy source code di bawah ini kemudian letakan sebelum </head> atau </header>

<nav>
<ul>
<li>Home</li>
 <li>Tutorial<ul>
  <li>Photoshop</li>
  <li>Illustrator</li>
  <li>Web Design<ul>
     <li>HTML</li>
     <li>CSS</li>
  </ul></li>
 </ul></li>
<li>Articles</li>
<li>Inspiration</li>
</ul>
</nav>

3. selanjutnya salin source code di bawah ini dan pastekan di  </style> atau ]]></b:skin>

nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav ul {
 background: #D8D8D8;
 padding: 0px;
 border-radius: 10px;
 list-style: none;
 position: relative;
    font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
    display: inline-table;
}
 nav ul:after {content: ""; clear: both; display: block;}
nav ul li { float: left;}
 nav ul li:hover {background: #4b545f;}
  nav ul li:hover a {color: #fff;}

 nav ul li a {display: block; padding: 15px 30px;color: #757575; text-decoration: none;}
nav ul ul {background: #5f6975; border-radius: 0px; padding: 0;position: absolute; top: auto;}
 nav ul ul li {float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}
  nav ul ul li a {padding: 15px 30px; color: #fff;}
   nav ul ul li a:hover {background: #4b545f;}
nav ul ul ul {position: absolute; left: 100%; top:0;}
@media screen and (max-width:768px){
   
}

4. jika ingin membuat menu navigasi tersebut sesuai ukuran template yang di pasang di blog hapus kode yang berwarna biru di atas. 

5. silahkan simpan template dan lihat sendiri perubahannya, menu navigasi ini 100% responsive