我的Wordpress(TwentyTwelve)导航菜单效果很好,但有了设计,我想这样做,但不能;
所以问题是:我的bg图像离我的导航文本太近了......但是如果我添加填充或行高,那么右边的边缘太长了。
那么如何在导航文本下添加间距,以便我的bg图像(悬停)变低,但没有右边界线变长?
如果有帮助,请参阅我的CSS代码
`
.main-navigation li a {
color: #fff;
line-height: 1.0;
text-transform: uppercase;
white-space: nowrap;
background:;
padding:0 15px 10px 15px;
margin:0;
border-right:#8fbf3d 1px solid;
}
.main-navigation li a:hover {
color: #fff;
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat bottom center;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #8fbf3d;
font-weight: bold;
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat bottom center;
}
`
答案 0 :(得分:0)
你可以使用CSS;
background-position: 10px 10px;
例如是X和Y,你也可以做百分比。
你也可以这样做;
background-position: center center;
或
background-position: right top;
例如。
EDIT ------ 我认为你错了订单而不是底部中心使用中心底部,试试;
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat center bottom;
答案 1 :(得分:0)
仍然没有找到这样做的神奇方法......但我找到了一种可行的替代方案
工作!