I want to display a small triangle icon on :hover on a navigation bar.

I've uploaded a simple test case at http://www.sdeyservices.co.uk/test. I'm using the :after pseudo-element to generate this icon.

At the moment the width of the list item increases when you hover over it. Also I want to position the icon centrally underneath each navigation item.

How would I be able to achieve this? I can't use a background-image because not all of the icon would be visible since it needs to display partially outside the list item's box.

Thanks.

4 answers

Jennie 30
0
points
This was chosen as the best answer

I tested it on different browsers and this seems to work better:

li {

float: left;
margin: 20px;
    <b>width: auto;</b>
border-right: 1px solid black;
padding-right: 20px;
    position:relative;

}

li:hover:after {

content: url('shape.png');
<b>position: relative; </b>       
display: block;
bottom: 2px;

}

This is how it looks on my test site:

http://harborth.co.nz/test/test.html

Good luck

Answered about 8 years ago by Jennie
  • Jennie that does centre the icon however on hover the list item's height increases. This is problematic because if you set a background colour on hover too the colour extends downwards with the icon. Setting the 'li:hover:after' to 'position: absolute' and then setting the 'right' value for each list item seems to work ok cross-browser so I'll probably stick with that unless you have any other ideas. Thanks very much for your help. olivaw about 8 years ago
Jennie 30
1
point

I suggest you add to your ul 'width:auto' so the centering can work - add 'position:relative' to your li so that the hover positioning can work, and then change your hover position: relative to 'position:absolute bottom 2px'(or wherever you want it) and add 'display:block'.

Like this: ul {

margin: 0 auto;
    *width: auto;*
text-align: center;

}

li {

float: left;
margin: 20px;
border-right: 1px solid black;
padding-right: 20px;
    *position:relative;*

}

li:hover:after {

content: url('shape.png');
*position: absolute;*
*display: block;
bottom: 2px;*

}

As I didn't have your image I tested it with a 20px wide by 15px high image of my own so you may have to tweak the above to match your image. Hope it works.

Answered about 8 years ago by Jennie
  • Thanks Jennie that's very helpful. The only remaining issue is that I want to align each icon centrally relative to each list item. The only way I've been able to do this is by setting the 'right' value for each list item (you can see this on my site). Is there a more efficient way of doing this? olivaw about 8 years ago
Jennie 30
0
points

How wide is the image shape.png?

Answered about 8 years ago by Jennie
  • 20 pixels wide olivaw about 8 years ago
0
points

You should probably just use the triangle images as background images.

So for instance:

li { padding-right: 10px / however big your image is + padding / background: url(triangle.png) 50% right no-repeat; }

li:hover { background-image: url(triangle_hover.png); }

This also will work better in most browsers, since :after is not understood by older IE6.

Answered about 8 years ago by thoughtandtheory
  • Just as an FYI, :hover is not understood by IE6 either. It's something that would need to be simulated for IE 6 support. Ktash about 8 years ago
  • I did try a background image but this doesn't help me. I need the triangle to appear underneath the list item so it has to be outside the <li> box and, consequently, with a background image the triangle wouldn't be visible. Ktash - :hover is understood by IE6 but only on <a> elements. olivaw about 8 years ago