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

CSS：如何为活动链接添加向下箭头

2 个答案: