CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table
CSS Code
<style type="text/css"> ul.v_menu{ /* กำหนดขอบเขตของเมนู */ list-style:none; margin:0px; padding:0px; font-family:tahoma, "Microsoft Sans Serif", Vanessa; font-size:12px; } ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูหลัก */ display:block; width:150px; height:20px; text-indent:5px; background-color:#FFCC00; border:1px #006633 inset; float:left; text-align:center; } ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */ display:block; width:150px; height:20px; text-indent:5px; background-color:#FFFFCC; border:1px #006633 inset; float:left; text-align:center; } ul.v_menu > li > a,ul.v_menu > li > ul > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */ text-decoration:none; color:#666666; line-height:20px; } ul.v_menu > li > ul{ display:none; list-style:none; margin:0px; padding:0px; } ul.v_menu > li:hover > ul { display:block; width:150px; } ul.v_menu > li > ul > li{ /* กำหนดรูปแบบให้กับเมนูย่อย */ display:block; width:150px; height:20px; text-indent:5px; background-color:#FFFFCC; border:1px #F4F4F4 solid; float:left; text-align:center; } ul.v_menu > li > ul > li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */ display:block; width:150px; height:20px; text-indent:5px; background-color:#F4F4F4; border:1px #F4F4F4 solid; float:left; text-align:center; } </style>
HTML Code
<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> <li><a href="#">Sub menu item 4</a></li> <li><a href="#">Sub menu item 5</a></li> <li><a href="#">Sub menu item 6</a></li> <li><a href="#">Sub menu item 7</a></li> <li><a href="#">Sub menu item 8</a></li> </ul> </li> <li><a href="#">Link menu item 4</a></li> </ul>
ดูตัวอย่าง