Question

I can’t figure out how to make it so that when I hover over a link, a small orange triangle appears below the link along a line i already have. The html and css this pertains to is below.

—–HTML—–

<div id='links'>
  <ul>
    <li><a href='#'>home</a></li>
    <li><a href='#'>interests</a></li>
    <li><a href='#'>game</a></li>
    <li><a href='#'>about</a></li>
    <li><a href='#'>contact</a></li>
  </ul>
</div>

—–CSS—–

div#links {
background: url('images/links_bg.gif') no-repeat right;
height: 75px;
margin: 0px;
}
div#links ul {
float: right;
list-style: none;
margin: 48px 35px 0px 0px;
}
div#links ul li {
display: inline;
margin: 0px;
}
div#links ul li a {
color: #e5e4e4;
font-size: 12px;
text-decoration: none;
margin: 0px 15px 0px 15px;;
}
div#links ul li:hover {
background: url('images/link_triangle.png') no-repeat;
font-weight: bold;
}

I also have a background image for all of the links. I think the problem is that since each link is basically a box around the text you can’t give it a background that extends past that box. I just don’t know how to fix it.

Answer 1

I just had to mess around with paddings and what not for a while. Got it eventually. Thanks for the help.