活动菜单项下居中的CSS箭头图像不显示
活动菜单项下居中的CSS箭头图像不显示
提问于 2014-05-02 00:24:00
我想把一个箭头图像(png)放在我的活动项目菜单的中心，而不是我实际的蓝色边框线。我试图修改我的css，但没有运气，图像没有出现。你知道我做错了什么吗？
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>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-02 00:47:16
我首先看到的是这条线
#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 x 20px的占位符图像。负边距应为图像宽度的一半(本例中为10px)，以使其与父元素居中对齐。
这里的版本也适用于较旧的浏览器(IE7及更低版本) http://jsfiddle.net/e3WEs/3/
Stack Overflow用户
发布于 2014-05-02 00:57:50
如果你不想使用，另一个选择是:after。:after几乎不被旧浏览器支持，如果你担心的话。
加价
<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");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23411896
复制相关文章
相似问题
腾讯云开发者
