Cara Membuat Menu Dropdown Multilevel dengan CSS

rudypratama.com - Salah satu elemen yang sangat penting pada sebuah website adalah menu navigasinya, bagian inilah yang akan menjadi pemandu para pengunjung ketika menjelajahi seluruh halaman yang ada pada sebuah website yang anda buat.

Jika tidak ada menu maka besar kemungkinan pengunjung akan bingung dan merasa tersesat ketika berkunjung ke website tersebut. Jadi menu harus ada pada sebuah website, bukan cuma harus ada namun harus di desain dengan baik pula sesuai struktur halaman website.

Menu bisa saja dibuat simpel, namun ketika menu website memiliki banyak sub bagian maka perlu dibuat menu yang multilevel, sehingga pengunjung bisa dengan mudah langsung menuju sub bagian yang dia inginkan. Berikut ini cara membuat dropdown menu multilevel dengan CSS, kita tidak perlu Javascript untuk membuatnya.

Struktur HTML

Pertama kita buat dulu struktur HTML nya seperti script dibawah ini, dimana terlihat ada banyak ul didalam ul, itulah yang akan membentuk sub menu nantinya.

<div class="nav">
<ul>
 <li><a href="">Home</a></li>
 <li><a href="">News</a></li>
 <li><a href="">Article</a></li>
 <li><a href="">Menu</a>

 <ul>
  <li><a href="">Submenu1</a></li>
  <li><a href="">Submenu2</a></li>
  <li><a href="">Submenu3</a>
  <ul>
   <li><a href="">Subsubmenu1</a></li>
   <li><a href="">Subsubmenu2</a></li>
   <li><a href="">Subsubmenu3</a>
   <ul>
    <li><a href="">subsubsubmenu1</a></li>
    <li><a href="">subsubsubmenu2</a></li>
    <li><a href="">subsubsubmenu3</a></li>
   </ul>
   </li>
  </ul>
  </li>
 </ul>
 </li>
</ul>

</div> <!--/ .nav -->

Style dengan CSS

Setelah struktur CSS dibuat selanjutnya agar menu dropdown multilevel bisa terlihat nyata dan menarik maka perlu di desain dengan CSS, berikut adalah kode CSS yang diperlukan.

.nav {
    width: auto;
    height: 60px;
    float: left;
    height: 60px;
    margin: auto;
}
.nav ul {
    list-style: none;
    display: inline-table;
    position: relative;
    padding: 0 20px;
    background: #006faa;
}
.nav ul li:hover > ul {
    display: block;
}
.nav ul:after {
    content: "";
    clear: both;
    display: block;
}
.nav ul li {
    float: left;
}
.nav ul li a{
    padding: 20px;
    text-decoration: none;
    color: #ececec;
    display: block;
    cursor: pointer;
}
.nav ul ul {
    background: #006faa;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    display: none;
}
.nav ul ul li {
    float: none;
    border-top: 1px solid #def4ff;
    border-bottom: 1px solid #def4ff;
    position: relative;
}
.nav ul ul li a {
    padding: 15px 40px;
}
.nav ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

Demo

Download Script

Artikel Menarik Lainya Cara Membuat Heading HTML Cara Membuat Website Dengan Blogger Tips Belajar Membuat Website Dinamis Cara Buat Website Dengan Wordpress

Demikian Cara Membuat Menu Dropdown Multilevel dengan CSS. semoga dapat membantu teman-teman yang ingin membuat menu dropdown multilevel. akhir kata terima kasih semoga bermanfaat.(Kamis, 08/03/2018)