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/

在这里，我使用了一个20px乘20px的占位符图像。负边距应为图像宽度的一半（在这种情况下为10px），以使其与父元素居中对齐。

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

Answer 2

另一种选择，如果你不想使用：之后。：如果您对此感兴趣，那么旧版浏览器几乎不支持。

http://jsfiddle.net/f3SQx/

标记式

<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

请将 z-index 值添加到 #cssmenu li a

希望这有助于你

在活动菜单项下居中的CSS箭头图像不显示

3 个答案: