CSS Arrow image centered under active menu item doesn't show

Question

I would like to put an arrow image (png) centered under my active item menu instead of having my actual blue border-line. I tried to modified my css with no luck, the image doesn't appear. do you know what I doing wrong ?

My CSS :

    #cssmenu ul {
    margin: 0;
    padding: 0;
    font-size: 12pt;
    font-weight: bold;
    background: #94adc1; 
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #f2f1f2;
    zoom: 1;
    text-align:center; 
}

#cssmenu ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu li {
    float: left;
    margin: 0 auto;
    padding: 0 4px;
    list-style: none;

}

#cssmenu li a {
    display: block;
    float: left;
    color: #123b59; 
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px 7px 20px;
    border-bottom: 3px solid transparent;
}

#cssmenu li a:hover {
    content: url("images/arrowmenunav.png");
    /*color: #6c8cb5;
    border-bottom: 3px solid #00b8fd;*/
}

#cssmenu li.active a {
    /*display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;*/
    content: url("images/arrowmenunav.png");

}

#cssmenu {
    width: 100%;
    position: fixed;
    height:94px; 
}

My menu in HTML :

<div id="cssmenu">
    <ul id="list">
        <li><a href="#home" >home</a></li>
        <li><a href="#home2">home2</a></li>
        <li><a href="#newsletter">newsletter</a></li>
</ul>
</div>

Answer 1

The first thing I can see is this line

#cssmenu li.active a {
    content: url("images/arrowmenunav.png");
}

Should be this:

#cssmenu li.active a:after {
    content: url("images/arrowmenunav.png");
}

I've setup this jsfiddle to show it in a bit more detail http://jsfiddle.net/e3WEs/2/

In this I've used a 20px by 20px placeholder image. The negative margin should be half of your image width (10px in this case) to centre align it to the parent element.

Here is a version that will work in older browsers too (IE7 and below) http://jsfiddle.net/e3WEs/3/

Answer 2

Another option if you don't want to use :after. :after is pretty much not supported by old browsers if that concerns you.

http://jsfiddle.net/f3SQx/

Mark-up

<li><a href="#home">home</a>
<div class="active"></div>
</li>

CSS

.active {
 position:absolute;
 width:30px;
 height:30px;
 top:100%;
 margin-left:32%;
 content: url("images/arrowmenunav.png");
}

Answer 3

Please add z-index values to #cssmenu li a

hope this helped you