Naah disini kita cuma nambain beberapa submenu kayak gambar dibawah :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Simple Nav </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <nav> <ul> <li><a href="#"> Home </a> <ul> <li><a href="#">Home 1</a></li> <li><a href="#">Home 2</a></li> </ul> </li> <li><a href="#"> Articles </a></li> <li><a href="#"> List </a></li> <li><a href="#"> Number </a> <ul> <li><a href="#"> Number 1</a></li> <li><a href="#"> Number 2</a> <ul> <li><a href="#"> Number 2a</a></li> <li><a href="#"> Number 2b</a></li> <li><a href="#"> Number 2c</a> <ul> <li><a href="#"> Number 2c1</a></li> <li><a href="#"> Number 2c2</a></li> <li><a href="#"> Number 2c3</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#"> Contact Poipo </a></li> </ul> </nav> </body> </html> |
Terus tambahan file css nya seperti ini ajjah :
1 2 3 4 5 6 7 8 | nav ul ul ul { left: 100%; top: 0; } nav ul ul li { position: relative; } |
Simple bukaan... Hasilnya...
Silahkan download kodenya dari github disini...
No comments:
Post a Comment