Membuat Menu Drop Down dengan HTML dan CSS

By | 17 January 2021

Pada tutorial sebelumnya kita sudah belajar membuat menu vertikal dan menu horizontal dengan html dan css, sekarang kita akan coba membuat menu drop down atau pop up menu. Maksud dari menu drop down di sini sebenarnya pop up menu atau menu yang muncul secara vertikal dari atas ke bawah ketika kursor diarahkan ke salah satu menu di menu horizontal. Untuk membuat menu drop down kita hanya memodifikasi dari menu horizontal dari sisi cssnya. Jadi tetap menggunakan tag ul atau unordered list secara nested, hanya saja kita menambah class misalnya drowpdown pada tag <li> dimana akan muncul menu drop downnya dengan tag ul baru. Perhatikan gambar berikut ini:

Menu Drop Down

Dan untuk membuat menu drop down seperti di atas silahkan pelajari dan praktekan seperti script html dan css di bawah ini:

<!DOCTYPE html>
 <html>
 <head>
  <title>Menu Drop Down</title>
  <Style>
   #menu{
    border: 1px solid;
    width: 850px;
    height: 30px;
    margin: 5px auto;
    background-color: blue;
    clear: both;
   }

   #topmenu ul{
    list-style: none;
    margin: 0;
    padding: 0;
   }

   #topmenu li{
    float: left;
    padding: 0 5px 0 0px;
    display: inline;
    position: relative;
   }

   #topmenu a{
    margin-left: 0px;
    margin-right: 5px;
    text-decoration: none;
    display: block;
    float: left;
    height: 25px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    color: #ffcc00;
   }

   #topmenu a:hover{
    margin-left: 0px;
    margin-right: 5px;
    text-decoration: none;
    display: block;
    float: left;
    height: 25px;
    background: red;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    color: yellow;
   }

   .dropdown ul{
    margin: 5px;
    width: 200px;
    padding: 5px 5px 5px 15px;
    list-style: none;
    background: #ccffff;
    position: absolute;
    z-index: 500;
    top: 30px;
    display: none;
   }

   .dropdown li{
    width: 200px;
    padding: 5px 5px 0 0;
    background: url(img10.gif) repeat-x bottom;
   }

   .dropdown li a{
   display: block;
    color: #ff8d10;
    text-decoration: none;
    background: url(img11.gif) no-repeat 0 5px;
    padding: 2px 2px 2px 10px;
    font-family: Georgia, arial, serif;
   }

   .dropdown li a:hover{
   display: block;
    color: #db6d00;
    text-decoration: none;
    background: #ffff33;
    width: 180px;
   }

  .dropdown:hover,
   .dropdown:hover ul{
    display: block;
   }
  </style>
 </head>
 <body>
  <Div id="menu">
   <div id="topmenu">
    <ul>
     <li><a href="#">Home</a></li>
     <li>
      <Div class="dropdown"><a href="#">Produk</a>
       <ul>
        <li><a href="#">Personal Web</a></li>
        <li><a href="#">E-Commerce Web</a></li>
        <li><a href="#">E-Learning Web</a></li>
        <li><a href="#">Family Web</a></li>
        <li><a href="#">Company Profil Web</a></li>
        <li><a href="#">School Web</a></li>
       </ul>
      </div>
     </li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Forums</a></li>
     <li><a href="#">Support</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
   </div>
  </div>
 </body>
 </html>

Demikianlah tutorial singkat tentang membuat menu drop down dengan html dan css, semoga bermanfaat.