SistemInformasiPHP.net

Kumpulan Sistem Informasi PHP, Tips & Trik HTML, CSS3, Javascript, HTML5, MYSQL, dan Informasi Programming Lainnya

Cara Membuat Menu Dropdown Dengan HTML

1komentar

Berikut adalah cara membuat drop down menu simple dan mudah dipahami. Kira kira source code berikut akan menampilkan drop down menu seperti ini :



Kode CSS :

<style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}

</style>

Kode HTML :

<ul id="drop-nav">
  <li><a href="#">Support</a></li>
  <li><a href="#">Web Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#">Content Management</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>

</ul>

Demikianlah tutorial cara membat drop down menu dengan css dan html simple. Semoga bermanfaat bagi project anda. terimakasih. wasalam.

www.sisteminformasiphp.com
Share this article :

+ komentar + 1 komentar

Anonim
7 Januari 2016 21.52

Thanks Infonya

Posting Komentar

Dilarang berkomentar dengan menggunakan kata-kata kotor, tidak senonoh, & mengandung unsur pornografi. Komentar yang tidak mematuhi etika akan diblok & dihapus. Terimakasih

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Sistem Informasi PHP | Koleksi Source Code | Tutorial PHP - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger