รบกวนดูโค้ด CSS การทำเมนูให้หน่อยค่ะ เรื่อง a:active อยากได้แบบว่า กด link แล้ว ตัวขีดเส้นใต้ ค้างอยู่เมนูนั้นๆ

/*Horizontal Menu*/
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: normal 15px ;
text-transform:uppercase;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
font-weight:500;
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:5px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;
}

ul.arrowunderline li a:hover{
border-bottom:1px solid #666; /* style of arrow underline */
color:#666;
}

ul.arrowunderline li a:active{
border-bottom:1px solid #666;
position:relative;
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent #666 transparent; /* create up arrow */
}

<ul class="arrowunderline">
    <li class="selected"><a href="index.php">concept</a></li>
    <li><a href="rooms.php">rooms</a></li>
    <li><a href="swimmingpool.php">swimming pool</a></li>
    <li><a href="map.php">map</a></li>
    <li><a href="booking.php">booking</a></li>		
</ul>