Membuat menu Dropdown dengan submenu ke-2
Sebelumnya telah dibuat
menu dengan tampilan sbb:
untuk gambar diatas code HTML-nya adalah
sbb:
<body >
<div id="widodo">
<ul>
<li><a href="#">
home</a></li>
<li>
<a href="#">menu1</a>
<ul> <li><a
href="#">submenu1</a>
<li><a
href="#">submenu2</a></li>
<li><a
href="#">submenu3</a></li></ul></li>
<li> <a href="#">menu2</a>
<ul> <li><a
href="#">submenu1</a></li>
<li><a
href="#">submenu2</a></li>
<li><a
href="#">submenu3</a></li></ul></li>
<li> <a href="#">menu3</a>
<ul> <li><a
href="#">submenu1</a></li>
<li><a
href="#">submenu2</a></li>
<li><a
href="#">submenu3</a></li></ul> </li>
</ul>
</body>
untuk memmbuat sub menu berikutnya maka kita tambah submenu lagi di dalam submenu.
karena kita memberi
submenu yang ke-2 pada menu1,maka agar mempermudah
pengerjaannya Tambahkan class
dengan nama nav pada Li-nya
<li
class="nav"> <a href="#">menu1</a>
<ul> <li
class="nav"><a
href="#">submenu1</a>
<ul> <li
class="nav"><a
href="#">submenu1</a></li>
<li><a
href="#">submenu2</a></li>
<li><a
href="#">submenu3</a></li>
</ul>
</li>
<li class="nav"><a
href="#">submenu2</a>
<ul> <li
class="nav"><a
href="#">submenu1</a></li>
<li><a
href="#">submenu2</a></li>
<li><a
href="#">submenu3</a>
</ul>
</li>
<li><a
href="#">submenu3</a></li>
</ul>
</li>
dan tambahkan kode berikut di dalam CSS
nya
/*sub menu
kedua BY widodo*/
#widodo .nav .nav:hover ul { /*memunculkan menu sebelah kanan lagi*/
display: block;
}
#widodo .nav .nav ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#widodo
.nav .nav ul li a {
background-color:#00FF99; /*Warna
submenu yaitu hijau*/
border:1px solid ;
border-color:#000099;
}
#widodo
.nav .nav ul li a:hover {
background: #095c80; /* warna menu
ketika dipilih*/
}
maka hasilnya sbb
semoga bermanfaat,,,hee
Tidak ada komentar:
Posting Komentar