BELAJAR WEB DESAIN

Membuat menu drop down

Berikut ini cara membuat menu dropdown menggunakan CSS:

Langka pertama buat kode html seperti berikut ini:

<ul class="nav">

      <li><a href="http://itkomputer.com">     IT KOMPUTER</a> </li>
          <li> <a href="#">DETIK</a> <ul>
                      <li>  <a href="#">sss</a> </li>
                       <li>  <a href="#">sss</a> </li>
                   </ul>
            </li>
     
      <li> <a href="#">    FACEBOOKz</a>      </li>
</ul>

Langka kedua buat kode css seperti berikut ini:


<style type="text/css">
/*  untuk font size */
ul.nav {
    font-size:14px;
}


ul.nav li {
   
    list-style:none;
    color:#FFF;
    float:left;
    background-color:#FF6600;
    text-align:center;
    padding:3px;
    box-shadow:1px 1px 2px 1px #000000;
    border-radius:10px 0px 10px 0px;
   
}

/*  Agar tidak muncul subemenu pada tampilan awal */
ul.nav  ul {
display: none;
}
/*submenu aktif bila  menu disorot */
ul.nav  li:hover  ul {
display: block;
}

ul.nav a {
    text-decoration:none;
    color:#FFF;
}

/* ganti warna backgound pada submenu */
ul.nav li:hover {
    background-color:#FF0;
   
}



ul.nav  ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}

ul.nav  li a {
display: block; padding: 15px 40px;
color: #757575; text-decoration: none;}


.nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
</style>

 

 

 

Selamat mencoba.