CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table
CSS Code
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <style type="text/css"> ul.v_menu{ /* กำหนดขอบเขตของเมนู */ list-style:none; margin:0px; padding:0px; width:180px; font-family:tahoma, "Microsoft Sans Serif", Vanessa; font-size:12px; } ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูเ */ display:block; height:20px; text-indent:5px; background-color:#339900; border:1px #FFFFFF inset; } ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */ display:block; height:20px; text-indent:5px; background-color:#FFCC00; border:1px #FFFFFF inset; } ul.v_menu > li > a,ul.v_menu > li:hover > ul > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */ text-decoration:none; color:#FFFFFF; line-height:20px; } ul.v_menu > li > ul{ display:none; list-style:none; margin-left:180px; padding:0px; width:180px; } ul.v_menu > li:hover > ul{ display:block; list-style:none; margin:0px; margin-top:-21px; margin-left:179px; padding:0px; width:180px; } ul.v_menu > li:hover > ul > li{ /* กำหนดรูปแบบให้กับเมนูย่อย */ display:block; height:20px; text-indent:5px; background-color:#FFCC00; border:1px #FFFFFF inset; } ul.v_menu > li:hover > ul > li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */ display:block; height:20px; text-indent:5px; background-color:#000000; border:1px #FFFFFF inset; } </style> |
HTML code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <ul class="v_menu"> <li><a href="#">Link menu item 1</a> <ul> <li><a href="#">Sub menu item 1</a></li> <li><a href="#">Sub menu item 2</a></li> <li><a href="#">Sub menu item 3</a></li> <li><a href="#">Sub menu item 4</a></li> </ul> </li> <li><a href="#">Link menu item 2</a></li> <li><a href="#">Link menu item 3</a> <ul> <li><a href="#">Sub menu item 1</a></li> <li><a href="#">Sub menu item 2</a></li> <li><a href="#">Sub menu item 3</a></li> </ul> </li> <li><a href="#">Link menu item 4</a> <ul> <li><a href="#">Sub menu item 1</a></li> <li><a href="#">Sub menu item 2</a></li> </ul> </li> </ul> |
ดูตัวอย่าง
