Question

I’m trying to achieve this mouseover effect with the smallest footprint possible. I can’t get the arrow (.png) to display, it gets cut off by the height and I’m not sure how to get the height to show. I’ve tried several failed methods so far, hoping someone can help me out.

What I’ve done is style the anchor for the box and try to position the small arrow below the box. The arrow isn’t displaying outside of the box in the anchor, it gets cut off. I tried making the arrow the part of the LI, it worked but because the anchor needs to be 30px (height of the blue box) and the LI needs to be 40px (box + the height of the arrow 10px) it will display the arrow if you mouse over that 10px area and not the box.

currently it looks like this.

Here is my css:

#navlist {
float:right;
}
#navlist li {
line-height:40px;
display:inline;
list-style-type: none;
margin-right: 20px;
}
#navlist li:hover {
background:url(../img/navArrow.png) no-repeat center;
background-position:50% 30px;
}
#navlist li a {
height:30px;
padding:3px 5px 3px 5px;
color:#26627f;

}
#navlist li a:hover {
background:#035173;
border-radius:3px;
color:#fff;
}

and here is the html:

<ul id="navlist">
    <li><a href="#">Get a Quote</a></li>
    <li><a href="#">Learn about Life Insurance</a></li>
    <li><a href="#">Our Company</a></li>
    <li><a href="#">Get Help</a></li>
</ul>

Answer 1

You could simply add the following to your CSS:

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -1em;
    border: 1em solid transparent;
    border-top-color: #035173;
}​

JS Fiddle demo.

This does, of course, require that the user have a browser that implements CSS generated content and pseudo-elements.

---

Edited in response to comment from OP, in comments below:

Not really sure how you are getting a shape out of that, care to explain? It works. Is there any way to make the arrow smaller and can it take a box-shadow effect?

It works because the border of an element meet at 45°, and because there’s no height/width for the element that produces a triangular shape ‘pointing’ towards the centre of the element (or, in this case, the pseudo-element). If all four borders were visible you’d have a square; if top and bottom were visible you’d have a triangular ‘hourglass,’ and so on.

To make the triangle smaller, simply assign a smaller unit to the border-width (in the example above the borders are set to 1em, simply change it to 5px or, well, any other size and unit of measurement that the browser can implement.

The negative margin-left (the -1em in the margin declaration) has to be equal to the border-width in order to place the pseudo-element centrally along the horizontal axis, but it can be adjusted to taste.

To add a box-shadow is difficult, since all four borders have to be assigned to create the triangular shape, the box-shadow would be a rectangle for the whole element, not just the ‘visible’ part of it. It can be emulated, if you’re okay about using another pseudo-element, in this case the ::before, but it won’t have the usual ‘fuzziness’ of a genuine box-shadow, but, as a demonstration, simply copy the above CSS, amend the ::after to ::before (and make sure the ::before element occurs before the declaration for ::after, as the later-declared element will be above the previously-declared element). Adjust the margins and the border-top-color properties and it should look okay-ish:

#navlist li:hover a::before,
#navlist li a:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -0.7em;
    border: 1em solid transparent;
    border-top-color: #ccc;
}

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -1em;
    border: 1em solid transparent;
    border-top-color: #035173;
}​

JS Fiddle demo.