CSS：如何添加一个向下箭头的活动链接

Question

！[在这里输入图片] [1]我有以下CSS导航，添加一个箭头悬停。

如何添加一个箭头以显示活动链接或链接？我重视的形象，以及

这里是低于

<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> 

HTML

<ul id="nav"> 
<li id="active"><a href="home.php">Home</a></li> 
<li><a href="photos.php">Photos</a></li> 
<li><a href="videos.php">Videos</a></li> 

<li><a href="add.php">Add a Restaurant</a></li> 
<li><a href="delete.php">Delete a Restaurant</a></li> 
<li><a href="logout.php">Logout</a></li> 
</ul> 

Answer 1

使用一个类名，如果不是一个id：

<li class="active"><a href="home.php">Home</a></li> 

然后，你可以这样做：

#nav li.active { 
    background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom; 
    margin: 0; 
} 

Answer 2

我的代码只是一个背景图片添加到CSS。

#active a:link, #active a:visited,#active a:hover 
{ 
/* border: 1px solid #333; */ 
background-color: #fafafa; 
color: #005596; 
font-weight:bold; 
background: transparent url(images/down_arrow2.png) no-repeat center bottom; 
    margin: 0; 
}