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:#339900;
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:#33CC33;
border:1px #006633 inset;
float:left;
text-align:center;
}
ul.v_menu > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */
text-decoration:none;
color:#FFFFFF;
line-height:20px;
}
</style>
HTML Code
<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>
ตัวอย่างผลลัพธ์
