SEPESER.COM

Cara Membuat Navigasi Menu Dropdown di Blogger

#menunavku{margin:0;padding:0;background-color:black;width:100%;height:40px;overflow:hidden;text-transform:uppercase;font-family:calibri}

#menunavku #menuku{list-style-type:none;margin:0;padding:0;width:100%;height:40px}

#menuku li{display:inline-block;float:left;margin-left:1px}

#menuku li a{display:block;height:30px;text-align:center;line-height:30px;color:#fff;background:#2f3036;text-decoration:none;padding:5px 10px}

#menuku ul li ul li a{min-width:140px}

#menuku .hiddenku{display:none}

#menuku li .hiddenku li a{min-width:170px;background-color:#5d5e63}

.hiddenku{width:170px;margin:0;padding:0;position:absolute;z-index:999}

.hiddenku li a{display:inline-block}

/*menuku hover*/

#menuku li a:hover{background-color:red}

#menuku li .hiddenku li a:hover{background-color:red}

/*memunculkan menu*/

#menuku li:hover .hiddenku{display:block;min-width:140px;float:none}

\*menu checkbox*\

#show-menuku{width:100%;height:20px;cursor:pointer}

input[type=checkbox]{display:none;-webkit-appearance:none}

input[type=checkbox]:checked ~ #menuku{display:block}

.show-menuku{text-decoration:none;color:#fff;background-color:#1946c5;text-align:center;padding:10px 0;display:none}

/*Responsive Styles*/

@media screen and (max-width:800px){#menunavku{width:100%;height:auto}#menuku{width:100%;display:none}#menunavku #menuku{position:relative;height:0}#menuku li{display:inline-block;margin:0;width:100%}#menuku li a{display:inline-block;margin-left:1px;width:100%;padding:5 0;margin:0}#menuku .hiddenku{position:relative;width:100%;padding:0}.show-menuku{display:block;cursor:pointer}}

 <nav id='menunavku'>

 <label for="show-menuku" class="show-menuku">Show Menu</label>

 <input type="checkbox" id="show-menuku" role="button"/>

 <ul id="menuku">

  <li><a href="#">Home</a></li>

  <li>

   <a href="javascript:void(0)">Pages &#65516;</a>

   <ul class="hiddenku">

    <li><a href="#">About</a></li>

    <li><a href="#">Contact</a></li>

 <li><a href="#">Disclaimer</a></li>

    <li><a href="#">Privacy Police</a></li>

   </ul>

  </li>

    <li>

   <a href="javascript:void(0)">Belajar Microscoft Office &#65516;</a>

   <ul class="hiddenku">

    <li><a href="#">Microsoft Word</a></li>

    <li><a href="#">Microsoft Excel</a></li>

    <li><a href="#">Microsoft Power Point</a></li>

   </ul>

  </li>

 </ul>

</nav>

 =lorem(4,5)