a:link { background-color: inherit; text-decoration: none; color: #d1e497; } a:visited { background-color: inherit; color: #c0cf92; text-decoration: none; } a:active { color: #ff5a00; background-color: inherit; text-decoration: underline; } a:hover { color: #ff6c00; background-color: inherit; text-decoration: underline; } ul { display: block; line-height: 30px; list-style-type: none; } li { list-style-type: none; display: inline; text-align: center; } li a:link { padding: 5px; margin: 1px; border: dashed 1px #FF9900; } li a:visited { padding: 5px; margin: 1px; border: dashed 1px #FF9900; } li a:active { padding: 5px; margin: 1px; border: dashed 1px #FF9900; } li a:hover { color: #cc6600; font-weight: bold; padding: 5px; background-color: #F8F8F8; border: solid 1px #FF9900; border-bottom: solid 3px #FF9900; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Horizontal Menu CSS</title> <link rel="stylesheet" href="horizontal.css" type="text/css" /> </head> <body> <ul> <li> <a href="#">หน้าแรก</a> </li> <li> <a href="#">Menu ที่หนึ่ง</a> </li> <li> <a href="#">Menu ที่สอง</a> </li> <li> <a href="#">Menu ที่สาม</a> </li> </ul> </body> </html>