CODEWITHSUNDEEP
css
user244394
user244394

Reputation: 13448

CSS: how to add a down arrow for the active link

![enter image description here][1]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 well

Here is my code below

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

Upvotes: 0

Views: 7230

Answers (2)

rogchap
rogchap

Reputation: 973

Use a class name instead if an id:

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

Then you can do:

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

Upvotes: 4

insomiac
insomiac

Reputation: 5664

Just add a background image to 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;
}

Upvotes: 0

Related Questions