เกี่ยวกับ : การทำ Rollover menu ด้วย CSS

ปัญหา : หลังจากการ คลิ๊ก เมนูจะไม่แสดงผลแบบ rollover

รูป :



Code : HTML

<div id="navigation">
 <ul>
  <li><a href="#">หน้าแรก</a></li>
  <li><a href="#">ประวัติผู้จัดทำ</a></li>
  <li><a href="#">รายชื่อผลงาน</a></li>
  <li><a href="#">เกี่ยวกับเรา</a></li>
 <ul>
</div>

Code : CSS

#navigation {
 width: 200px;
}
#navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navigation li{
 border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link ,#navigation li a:visited{
 font-family:tahoma;
 font-size: 80%;
 display: block;
 padding: 5px 5px 5px 5px;
 border-left: 10px solid #711515;
 border-right: 1px solid #711515;
 background-color: #B51032;
 Color: #FFFFFF;
 text-decoration: none;
}
#navigation a:hover{
 background-color:#711515;
 color:#FFFFFF;
}

จากการแก้ไขเอา ,#navigation li a:visited ออก ทำให้ผลเป็นดังรูป

รูป :


นั่นเพราะ ในฟังก์ชั่น ,#navigation li a:visited มีการกำหนด style ไว้ ทำให้การเอา a:visited ออก

ส่งผลให้ลิงค์ที่ถูกคลิ๊ก ไม่มี Style

ผมจะแก้ปัญหายังไงดี ? ที่จะเมื่อคลิ๊กแล้ว เมื่อเอาเมาส์ ไปวางยังคงมีการแสดงผลแบบ rollover อยู่

ผู้มีความรู้โปรดชี้แนะด้วยครับ