0

![ここに画像の説明を入力][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>
4

2 に答える 2

3

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;
}
于 2013-01-18T01:39:27.477 に答える
0

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;
}
于 2013-01-18T01:39:02.433 に答える