เมื่อ Rollover Menu คลิกแล้วไม่เปลี่ยน

มีคำถามมาจากกบอร์ดเกี่ยวกับ Rollover Menu ผมเลยเอาโค้ดมาลงให้ดู เผื่อมีใครสนใจเหมือนกัน และเพื่อเป็นกรณีศึกษา

คำถามมีอยู่ว่า ได้ออกแบบ Rollover Menu แล้ว แต่เมื่อเอาเมาส์คลิกที่เมนู จะทำให้ไม่มีการแสดง Rollover อีก

ด้านบนเป็นโค้ดส่วนเมนู ส่วนด้านล่างเป็นโค้ดต้นฉบับในส่วนของ CSS ที่มีการสอบถามมา


ปัญหามันอยู่อีตรงส่วนสีแดงนั่นแหละครับ เนื่องจากเป็นการกำหนดไปในแต่ละกรณี คือ a:link และ a:visited บราวเซอร์มันเลยปฏิบัติไปตามที่กำหนด โดยที่ a:visited มันมีความสำคัญสูงกว่า a:hover และ a:link มันเลยไม่กลับไปแสดงทั้ง 2 ส่วน (สังเกตุได้จากในสภาวะปกติ ลิงค์ที่ถูกคลิกจะเปลี่ยนสีเป็นสีน้ำเงินแล้วไม่เปลี่ยนกลับไปอีก)

การแก้ไขก็แค่อย่าไปกำหนดแยกกันครับ ให้กำหนด Style รวมๆกันไปทีเดียวเลย ด้วยการใช้แค่ื a เฉยๆ ดังโค้ดด้านล่าง