เมื่อ Rollover Menu คลิกแล้วไม่เปลี่ยน
คำถามมีอยู่ว่า ได้ออกแบบ Rollover Menu แล้ว แต่เมื่อเอาเมาส์คลิกที่เมนู จะทำให้ไม่มีการแสดง Rollover อีก
<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>ด้านบนเป็นโค้ดส่วนเมนู ส่วนด้านล่างเป็นโค้ดต้นฉบับในส่วนของ CSS ที่มีการสอบถามมา
<style type="text/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;
}
</style>ปัญหามันอยู่อีตรงส่วนสีแดงนั่นแหละครับ เนื่องจากเป็นการกำหนดไปในแต่ละกรณี คือ a:link และ a:visited บราวเซอร์มันเลยปฏิบัติไปตามที่กำหนด โดยที่ a:visited มันมีความสำคัญสูงกว่า a:hover และ a:link มันเลยไม่กลับไปแสดงทั้ง 2 ส่วน (สังเกตุได้จากในสภาวะปกติ ลิงค์ที่ถูกคลิกจะเปลี่ยนสีเป็นสีน้ำเงินแล้วไม่เปลี่ยนกลับไปอีก)
การแก้ไขก็แค่อย่าไปกำหนดแยกกันครับ ให้กำหนด Style รวมๆกันไปทีเดียวเลย ด้วยการใช้แค่ื a เฉยๆ ดังโค้ดด้านล่าง
#navigation li a{
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;
}ตัวอย่าง :