Membuat Drop Down Menu

Pada artikel sebelumnya tentang cara membuat custom menu navigasi, ternyata saya melewatkan sebuah panduan yaitu bagaimana kalau menu-nya bersusun alias ada sub menu. Mengingat ruang navigasi yang ada cuma cukup untuk 1 baris menu saja, maka kita perlu mengakalinya dengan membuat drop down.

Bagaimanakah caranya?

Mudah saja kok. Kita cuma perlu main-main sedikit dengan CSS-nya. Dan inilah kode CSS yang harus anda masukkan di file style.css

#menu {
  display: block;
  float: left;
  width: 100%;
}
#menu .menu-header,
div.menu {
  width: 100%;
}
#menu .menu-header ul,
div.menu ul {
  list-style: none;
  margin: 0;
}
#menu .menu-header li,
div.menu li {
  float: left;
  position: relative;
}
#menu a {
  color: #aaa;
  display: block;
  line-height: 25px;
  padding: 0 10px;
  text-decoration: none;
}
#menu ul ul {
  display: none;
  position: absolute;
  top: 25px;
  left: 0;
  float: left;
  width: 180px;
  z-index: 99999;
}
#menu ul ul li {
  min-width: 180px;
}
#menu ul ul ul {
  left: 30px;
  top: 35px;
}
#menu ul ul a {
  background: #000000;
  line-height: 1em;
  padding: 10px;
  width: 180px;
  height: auto;
}
#menu li:hover > a,
#menu ul ul :hover > a {
  background: #000000;
  color: #fff;
}
#menu ul li:hover > ul {
  display: block;
}

Anda bisa meletakkannya di baris paling bawah. Dan sekarang cobalah membuat menu bersusun di menu Appearance – Menus.

Untuk membuat bersusun, geser sub menunya agak menjorok, nanti akan muncul box pembantunya sehingga bisa anda letakkan dengan mudah.

Dicari dengan kata kunci:

membuat drop down menu,membuat dropdown menu,yhs-fh_lsonsw,membuat menu drop down,drop down,cara membuat sub menu di wordpress,drop down menu,membuat menu dropdown di wordpress,membuat drop down menu wordpress,membuat menu dropdown