html - 在事件菜单项下居中的 CSS 箭头图像不显示

Question

我想在我的事件元素菜单下方放置一个箭头图像 (png)，而不是让我的实际蓝色边框线居中。我试图修改我的 css 但没有成功，图像没有出现。你知道我做错了什么吗？

我的 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; 
}

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

我首先看到的是这一行

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

应该是这样的:

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

我已设置此 jsfiddle 以更详细地显示它 http://jsfiddle.net/e3WEs/2/

在此我使用了 20 像素 x 20 像素的占位符图像。负边距应为图像宽度的一半(在本例中为 10px)，以使其与父元素居中对齐。

这是一个也适用于旧版浏览器(IE7 及以下)的版本 http://jsfiddle.net/e3WEs/3/