I have the following CSS navigation that adds an arrow on hover.How can add an arrow to be visible for the active or on link? i have attached the image as wellHere is my code below\[code\]<style type="text/css">#nav { margin-top:0;padding: 12px 0;margin-left: 0;background-color: #fafafa;color: #464646; -moz-box-shadow: 0 5px 5px #888;-webkit-box-shadow: 0 5px 5px #888;box-shadow: 0 5px 5px #888;}#nav li { list-style: none; display: inline; margin: 0px; padding: 0; padding: 22px; padding-right: 0; padding-left: 0;}#nav li a { font-family: Arial; font-style:normal; text-transform: uppercase; text-decoration: none; color: #464646; padding: .7em 3em; border-right: 1px dashed #959595;}#nav li a:hover { background-color: #fafafa;color: #005596;font-weight: bold;}#nav li:hover { background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom; margin: 0;}#active a:link, #active a:visited,#active a:hover{/* border: 1px solid #333; */background-color: #fafafa;color: #005596; font-weight:bold;}</style>\[/code\]HTML\[code\]<ul id="nav"><li id="active"><a href="http://stackoverflow.com/questions/14391184/home.php">Home</a></li><li><a href="http://stackoverflow.com/questions/14391184/photos.php">Photos</a></li><li><a href="http://stackoverflow.com/questions/14391184/videos.php">Videos</a></li><li><a href="http://stackoverflow.com/questions/14391184/add.php">Add a Restaurant</a></li><li><a href="http://stackoverflow.com/questions/14391184/delete.php">Delete a Restaurant</a></li><li><a href="http://stackoverflow.com/questions/14391184/logout.php">Logout</a></li></ul>\[/code\]When it on or active it should look something like this
