Sharing All Genre Experience

Hi, pada sesi kali ini penulis melanjutkan sesi yang sebelumnya tentang source code css drop-down list. Pada sesi sebelumnya, penulis sudah menyampaikan/menuliskan rahasia dari bagaimana file ketika di hover akan memunculkan menu lain di bawahnya. Untuk kali ini penulis akan menyempurnakan source code css sebelumnya sehingga menjadi tampilan menu yang menarik,

Pada sesi sebelumnya, penulis menuliskan file HTML nya dengan disertai source code CSS nya. Kali ini akan penulis ulas kembali file tersebut dan akan ditambah dengan source code CSS yang lengkap:

<div id="navigation">
<ul id>
<li><a href="#">Home</a></li>
<li><a href="#"> Contoh Artikel</a>
<ul>
<li><a href="#">Corel</a></li>
<li><a href="#">Adobe</a></li>
</ul>
    <li><a href="#">Contact US</a></li>
<li><a href="#">About</a></li>
</div>

Ketikkan source code CSS nya::

#navigation ul ul {
 display: none;
}
#navigation ul li:hover > ul {
  display: inline;
 }
#navigation ul {
 background:black;
 padding:0px;
margin:0px;   
 list-style: none;
 position: relative;
 }
 #navigation ul:after {
  content: ""; clear: both; display: block;
 }

#navigation ul li {
  float: left;
 }
  #navigation ul li:hover {
   background:red;
    color:white;
  }

 
  #navigation ul li a {
   display: block;
    padding: 10px 16px;
   color: #fff;
    text-decoration: none;
  }
  
 
 #navigation ul ul {
  background: black; padding: 0;
  position: absolute; top: 100%;
 }
  #navigation ul ul li {
   float: none;
  }
   #navigation ul ul li a {
    padding: 10px 40px;
    color: #fff;
   }
    #navigation ul ul li a:hover {
     background:red;
    color:white;
    }

Pada sesi sebelumnya, penulis sudah memberitahu source code CSS drop-down list trick pada page: CSS Drop-Down part 1.  Sekarang akan penulis lanjukan tentang source code CSS drop-down di atas. Yang akan di bahas adalah bagian yang dianggap sangat penting dalam source code CSS drop-down ini.

#navigation ul {
 background:black;
 padding:0px;
margin:0px;   
 list-style: none;
 position: relative;
 } -----> Pada baris ini adalah source code CSS untuk mengatur tag ul (unordered list) di dalam tag navigation. Source code CSS ini akan memberikan background dengan warna hitam, padding dan margin berjarak 0 dan akan menghilangkan list style (ex: character, dot, numeric).


#navigation ul:after {
  content: ""; clear: both; display: block;
 }---> source code CSS pada baris ini adalah untuk memberhentikan source code agar tidak terjadi error ketika kita melakukan hovering pada menu, tanpa mengganggu source code yang ada di bawah nya. Jika tidak ditutup dengan script ini maka bisa dipastikan, ketika di run hasil outputnya akan berantakan. Dan jangan lupa untuk menambahkan display:block; Untuk mengatur tampilan hovering nya.

Berikutnya adalah pengaturan padding ketika menu di hover:

  #navigation ul li a {
   display: block;
    padding: 10px 16px;
   color: #fff;
    text-decoration: none;
  }
---> Pengaturan padding disini sangat lah penting, kita bisa membuat pengaturan padding disesuaikan dengan lebar menu yang akan di hovering.

Untuk result nya akan tampil sperti ini: