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,membuat menu drop down,yhs-fh_lsonsw,drop down,cara membuat sub menu di wordpress,drop down menu,membuat menu dropdown di wordpress,membuat drop down menu wordpress,membuat menu dropdown

36 thoughts on “Membuat Drop Down Menu

    1. admin Post author

      Theme seperti apa? Theme yang diajarin disini? Emang itu untuk theme yang diajarin disini kok πŸ™‚ Kalau Twentyten, tidak perlu lagi, karena sudah bisa dropdown-nya

  1. Andi

    Mas Admin, cara menampilkan form search di menu gimana ya? serta merubah tampilan tombolnya gimana ya?

    thanks b4

  2. Dadan Hatomi

    Terima kasih untuk artikelnya mas, samai di sini aku bisa ikutiin cuma ada sedikit kendala dalam percobaannya, ko tampilan menunya malah berantakan yah.. mohon kasih penerangan dong mas..

    Sebelumnay terima kasih untuk artikel tanggapannya.

  3. Dadan Hatomi

    Terima kasih banyak untuk jawabannya, sekarang sudah ada kemajuan menunya sudah bisa tampil berjejer. tapi kalo ada sub menunya tetep ga jadi drop down mas. malah dia mucul terus namun posisinya dibawah menu induk seperi sekarang ini http://hatomi.web.id/nitnit. mohon maaf bagi yang lain kalo yang baca komentar ini kurang berkenan tapi mau gimana saya belum bisa. kan saya juga ga mau ketinggalan pelajarannya πŸ™‚

    1. admin Post author

      Iya, yang CSS yang di pelajaran header memang sudah anda pasang, tapi yang di drop down justru anda hilangkan. Gimana sih? mau ngelawak ya? πŸ˜€

  4. Dadan Hatomi

    Terima kasih banyak untuk tanggapannya mas,
    bukan mau ngelucu mas tapi karena dari kemaren saya utak atik lom berhasil jadinya saya coba-coba deh hdan hasilnya seperti itu yang terlihat buat mas admin seperti mau ngelucu. maaf mas admin tanya lagi yang pelajaran header cssnya udah saya pasang. terus untuk yang drop doown ini tinggal kita pasang di bawah pelajaran header apa yang pelajaran header di gantikan css yang ddrop down ini.
    maaf juga kalo merepotkan mas admin ini.

  5. aqgeni

    Terima kasih atas petunjuknya gan sudah saya coba dan sukses. Yang menjadi pertanyaan saya berarti di file CSS ada dua #header setelah tambahan kode di atas, apakah #header yang sebelumnya dihapus saja biar tidak double.

  6. Made LLB

    mas menu saya kok jadi hilang ya gara2 style dropdown ini apa benar step saya
    #menu {
    margin-top:10px;
    padding:0;
    background:#000;
    height:30px;
    }
    #menu ul {
    margin: 0;
    padding: 5px 0 0 15px;
    list-style: none;
    display: block;
    }
    #menu li , #menu li a{
    float: left;
    position: relative;
    margin-right:10px;
    color:#ffffff;
    text-decoration: none;
    }

    diganti dengan ini ya

    #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;
    }

  7. irfan

    mas mo nanya ko setelah
    di tambahin menu di atas ke css nya menu
    daftar menu nya jadi ilang ..
    ni style css say amas maksih sbelum nya..

    /*
    Theme Name: themefosil
    Theme URI: http://wordpress.or.id/
    Description: Theme Pertama yang Gue Buat untuk Bangsa Indonesia Tercinta
    Author: Irfan Fadhillah
    Author URI: http://lutviavandi.com/
    Version: 1.0
    */

    body {
    background:url(images/kayy.jpg);
    background-repeat:inherit;

    }
    .body { margin:0px; }

    #wrap {
    width:1000px;
    height:auto;
    }

    #header {
    background:url(images/theme_01.png);
    width:1000px;
    height:180px;
    margin-top:-30px;
    }
    #isi {
    background:url(images/theme_02.png);
    width:697px;
    height:auto;
    float:left;
    }
    #conten {
    background:url(images/theme_03.png);
    width:303px;
    height:auto;
    float:left;
    }
    #footer {
    background:url(images/theme_04.png);
    height:85px;
    width:1000px;
    float:left;
    }

    #wrap_conten {
    width:292x;
    height:auto;
    float:inherit;
    }
    #header_coneten {
    background:url(images/conten_01.png);
    width:290px;
    height:97px;
    float:left;
    }
    #isi_conten {
    background:url(images/conten_02.png);
    height:auto;
    width:290px;
    float:left;
    }
    #footer_conten {
    background:url(images/conten_03.png);
    width:290px;
    height:69px;
    float:left;
    }
    .post-text { background: url(‘images/judul_post.png’) no-repeat;
    }
    .blogtitle {
    font-size:30px;
    padding:30px 0 0 30px;
    margin:0;
    }
    .description {
    font-size:14px;
    padding-left: 30px;
    margin:0;
    }

    #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;
    }

    #postmeta {
    font-size:10px;
    background:#FFFF66;
    padding:10px;
    }

    #slidearea{
    height: 170px;
    overflow: hidden;
    margin:10px 0px 0px 0px;
    padding:10px;
    position: relative;
    width:560px;
    border:solid 1px #cccccc;
    background: #ededed;
    }
    #gallerycover{
    overflow: hidden;
    margin:0px 20px 0px 0px;
    }
    .mygallery{
    overflow: hidden;
    position:relative;

    }
    .mytext img{
    float:left;
    }
    .mytext{
    position:relative;
    margin:0px 5px 0px 5px;
    height: 240px;
    display:inline;
    float:left;
    color:#c4c4c4;
    }
    .mytext h2 {
    padding:0px;
    margin:0px;
    font-size: 18px ;
    font-weight:bold;
    font-style:italic;
    }
    .mytext h2 a:link,.mytext h2 a:visited{
    color:#006b97;
    text-decoration:none;
    }
    .mytext p{
    padding:0px 0px;
    color:#555;
    font-size: 14px ;
    line-height:20px;
    font-style:italic;
    text-shadow:1px 1px 0px #f6f6f6;
    }
    .nextb {
    float:rightright:
    }
    .prevb {
    float:left;
    }
    #post_h { background:url(images/post_01.png) ;
    width:650px;
    height:67px;
    float:left;

    }
    #post { background:url(images/post_02.png);
    width:650px;
    height:auto;
    float:left;

    }
    #postt { background:url(images/post_03.png) ;
    width:650px;
    height:auto;
    float:left;
    }
    #post_f { background:url(images/post_04.png) ;
    width:650px;
    height:79px;
    float:left;
    }
    .text_j {
    text-decoration:none;
    color:#000000;
    font-size:40px;
    }
    #read {
    background:url(images/readmore.png);
    width:106px;
    height:40px;
    float:right;
    }
    .text {text-decoration:none; }

    .list {list-style:url(images/list.png); }

  8. fadhill

    mas mu nanya nihh …
    knpa ya mas pas sya copas code css di atas ko mnu malah jadi gak tampill ya…??
    minta pencerahan nya dong mas … pliiss…,

  9. SMARTCELLPHONES

    thanks mas infonya sangat bermanfaat, oiya gan saya mau tanya kalo cara ngilangin “You may use these HTML tags and attributes” di bawah kotak komentar gimana gan???

    ane cari cara-caranya belum ketemu sampe saat ini, akhirnya gw hapus aja kotak komennya.. -)

  10. find more

    I just want to say I am just new to weblog and actually loved this web page. Likely I’m going to bookmark your site . You surely come with really good well written articles. Bless you for sharing with us your web site.

  11. Merrill Fisler

    Pretty section of content. I just stumbled upon your web site and in accession capital to assert that I get in fact enjoyed account your blog posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently fast.

  12. Adan Teffeteller

    I am really impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it’s rare to see a nice blog like this one nowadays..

  13. Kurt Birdwell

    hello there and thank you for your information – I’ve certainly picked up anything new from right here. I did however expertise several technical points using this site, since I experienced to reload the website lots of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I’m complaining, but slow loading instances times will very frequently affect your placement in google and could damage your high-quality score if advertising and marketing with Adwords. Anyway I am adding this RSS to my e-mail and could look out for much more of your respective intriguing content. Ensure that you update this again very soon..

Comments are closed.