MEMBUAT MENU DROPDOWN SEDERHANA DENGAN CSS

OK Fren... Langsung Aja yaa, Ketikkan kode berikut untuk Menunya :

<div id="cssmenu"> <ul> <li><a href="https://technoindustri.blogspot.com/">Beranda</a></li> <li> <span>Kategori <i class="arrow"></i></span> <ul class="dropdown"> <li><a href="#">- Chord Gitar</a></li> <li><a href="#">- Seputar Musik</a></li> <li><a href="#">- Teknologi Dan Industri</a></li> <li><a href="#">- Tips Dan Trik</a></li> <li><a href="#">- Tutorial</a></li> </ul> </li> <li> <span>Layanan <i class="arrow"></i></span> <ul class="dropdown"> <li><a href="https://solusiteknikindo.com/">- Servis Ac Dan Elektronik</a></li> <li><a href="https://technoindustri.blogspot.com/">- Servis Mesin Industri</a></li> <li><a href="https://technoindustri.blogspot.com/">- Web Designer</a></li> <li><a href="https://technoindustri.blogspot.com/">- Retrofit Mesin CNC</a></li> <li><a href="https://technoindustri.blogspot.com/">- Teknisi FreeLance</a></li> <li><a href="https://technoindustri.blogspot.com/">- Instalasi Listrik</a></li> </ul> </li> <li> <span>Pemrograman<i class="arrow"></i></span> <ul class="dropdown"> <li><a href="https://technoindustri.blogspot.com/search/label/Machine%20Programer">- Bahasa Arduino</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Machine%20Programer">- Bahasa C</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- CSS</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- HTML</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- Javascript</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- JQuery</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- PHP</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Machine%20Programer">- Ladder Programer</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Machine%20Programer">- Visual Basic</a></li> </ul> </li> <li> <span>Download <i class="arrow"></i></span> <ul class="dropdown"> <li><a href="https://technoindustri.blogspot.com/search/label/Download%2020Mp3">- Download Mp3</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/RPP%2020Dan%2020SILABUS">- Dowload Ebook</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/RPP%2020Dan%2020SILABUS">- RPP Dan Silabus</a></li> <li><a href="https://technoindustri.blogspot.com/search/label/Software">- Download Software</a></li> </ul> </li> <li><a href="#">About me</a></li> </ul> </div>


Untuk mempercantik tampilannya silahkan gunaa kode CSS berikut :

/*Top level items ---------------------------------------*/
 #cssmenu >ul>li>span, #cssmenu >ul>li>a
 {
 font-size:18px;
 color:inherit;
 text-decoration:none;
 padding:10px 10px;
 font-weight:400;
 text-transform:uppercase;
 letter-spacing:2px;
 display:block;
 position:relative;
 transition:all 0.3s;
 vertical-align : bottom ;
 }

 #cssmenu li:hover > span, #cssmenu li:hover > a
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 border-radius : 3px ;
 }

 /*Sub level items ---------------------------------------*/
 #cssmenu .dropdown
 {
 text-align:left; left:0;
 letter-spacing:1px;
 font-size : 13px ;
 color: #222222;
 background-color:#FFFFFF;
 border:none; position:absolute;
 box-shadow: 0 2px 8px #CDCDCD ;
 display:none; opacity:0; cursor:pointer;
 }

 #cssmenu .dropdown li
{
 display: block;
 border-bottom : 0px #cdcdcd inset ;
 }

 #cssmenu .dropdown li > span, #cssmenu .dropdown li > a, #cssmenu .clm a, #cssmenu .clm h3
 {
 font-size:13px;
 font-weight:400;
 font-family:inherit;
 margin:0;
 padding:8px 10px;
 display:block;
 color:inherit;
 text-decoration:none;
 }

 #cssmenu .clm h3 {
 font-size:20px; font-weight:700;
 }

 #cssmenu .sub-item
{
 background-color:#FFFFFF;
 position:relative; transition:all 0.3s;
 }

 #cssmenu .dropdown li:hover
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 }

 #cssmenu .dropdown li:hover > span, #cssmenu .dropdown li:hover > a
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 }

 #cssmenu .clm a:hover
 {
 color:#000000; transition:color 0.2s;
 }

 #cssmenu .dropdown.right0
{
left:auto;right:0;
}

 #cssmenu .dropdown li > .dropdown.right0 {left:auto;right:100%20;} #cssmenu li.full-width{ position:static; } #cssmenu li.full-width .dropdown{ width:100%20; left:0; box-sizing:border-box; } #cssmenu li:hover > .dropdown { display:block; opacity:1; z-index:1; } #cssmenu .dropdown li > .dropdown { left:100%20; right:auto; top:0; } #cssmenu ul.dropdown { min-width:240px; /* Sub level menu min width */ } #cssmenu div.dropdown { text-align:center; } /* each column */ #cssmenu .clm { text-align:left; margin:20px; vertical-align:top;/*or middle*/ width:auto; min-width:240px; display:inline-block; *display:inline;*zoom:1; } #cssmenu .clm a:hover { color:#000000; text-decoration:underline; } /*-----------Arrows----------------*/ #cssmenu .arrow { color:inherit; border-style:solid; border-width:2px 2px 0 0; padding:5px; transform:rotate(135deg);margin-top:-10px;margin-left:5px; position:relative; display: inline-block; width: 0; height: 0; vertical-align:middle; overflow:hidden;/*for IE6*/ } #cssmenu .dropdown .arrow { transform:rotate(45deg); top:50%20;margin-top:-7px; position:absolute;left:auto;right:20px; } @keyframes topItemAnimation{ from {opacity: 0; transform:translate3d(-16%20, 0, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} } #cssmenu li a {animation:none;} #cssmenu.active li a { animation: topItemAnimation 0.5s ease 0.5s backwards;} #cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.5s ease 0.08333333333333333s backwards;} #cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.5s ease 0.16666666666666666s backwards;} #cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.5s ease 0.25s backwards;} #cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.5s ease 0.3333333333333333s backwards;} #cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.5s ease 0.4166666666666667s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}

Maka hasilnya akan tampak seperti berikut :

• Beranda
• Kategori
  • - Chord Gitar
  • - Seputar Musik
  • - Teknologi Dan Industri
  • - Tips Dan Trik
  • - Tutorial
• Layanan
  • - Servis Ac Dan Elektronik
  • - Servis Mesin Industri
  • - Web Designer
  • - Retrofit Mesin CNC
  • - Teknisi FreeLance
  • - Instalasi Listrik
• Pemrograman
  • - Bahasa Arduino
  • - Bahasa C
  • - CSS
  • - HTML
  • - Javascript
  • - JQuery
  • - PHP
  • - Ladder Programer
  • - Visual Basic
• Download
  • - Download Mp3
  • - Dowload Ebook
  • - RPP Dan Silabus
  • - Download Software
• About me

Ok Fren, demikian tutorial kali ini semoga bermanfaat buat fren-fren sekalian, jangan lupa kritik dan saran ya melalui komentar dan Kalo Mau copas silahkan aja tapi mohon sertakan link sumber.
Terima Kasih