CSS Rollover Menu

เมนูที่เปลี่ยนสีเมื่อโดนชี้ ที่ใช้ CSS (Cascading Style Sheet)

ประยุกต์มาจากตอนที่ทดสอบ CSS จากหน้านี้ [WellStyled: CSS Inline Buttons] ประกอบกับความคิดที่อยากทำแบบนี้มาตั้งนานละ

ทำออกมา ได้แบบนี้

หน้าหลัก

ค้นหา

ดาวน์โหลด

สมาชิก

พื้นที่ส่วนสมาชิก

พื้นที่ส่วนบุคคล

เลขาส่วนตัว

ช่วยเหลือ

นี่โคด

<style>
.bmktb td {
 width: 150px;
 border: thin solid black;
 }
.bmk div {
 width: 140px;
 background-color: Orange;
 color: White;
 font-weight: Bold;
 padding-left:10px;
 }
.bmk:hover div {
 background-color: Black;
 }
</style>
<div style='border:thin solid darkblue;width:155px;padding:2px;'>
 <table class=bmktb cellpadding=0>
  <tr><td><a href=# class=bmk><div>หน้าหลัก</div></a></td></tr>
  <tr><td><a href=# class=bmk><div>ค้นหา</div></a></td></tr>
  <tr><td><a href=# class=bmk><div>ดาวน์โหลด</div></a></td></tr>
  <tr><td><a href=# class=bmk><div>สมาชิก</div></a></td></tr>
  <tr><td><a href=# class=bmk><div>พื้นที่ส่วนสมาชิก</div></a></td></tr>
  <tr><td><a href=# class=bmk><div>พื้นที่ส่วนบุคคล</div></a></td></tr>
  <tr><td><a href=# class=bmk><div>เลขาส่วนตัว</div></a></td></tr>
  <tr><td><a href=# class=bmk><div>ช่วยเหลือ</div></a></td></tr>
 </table>
</div>