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 | <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 #006633 inset;}ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */ display:block; height:20px; text-indent:5px; background-color:#33CC33; border:1px #006633 inset;}ul.v_menu > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */ text-decoration:none; color:#FFFFFF; line-height:20px;}</style> |
HTML Code
1 2 3 4 5 6 | <ul class="v_menu"> <li><a href="#">Link menu item 1</a></li> <li><a href="#">Link menu item 2</a></li> <li><a href="#">Link menu item 3</a></li> <li><a href="#">Link menu item 4</a></li> </ul> |
ตัวอย่างผลลัพธ์
