我正在开发带有分隔符的垂直菜单(仅限 CSS)。为了在悬停时隐藏这些分隔符,我尝试使用边框 + 负边距(取消边框)。但是在 Firefox 上它会创建一个换行符......我该如何解决它?谢谢
http://jsbin.com/akazuf/1/edit(完整尝试输出)
注意:悬停将为黑色,红色用于测试。
这里没有解决方案:导航分隔符:(
我正在开发带有分隔符的垂直菜单(仅限 CSS)。为了在悬停时隐藏这些分隔符,我尝试使用边框 + 负边距(取消边框)。但是在 Firefox 上它会创建一个换行符......我该如何解决它?谢谢
http://jsbin.com/akazuf/1/edit(完整尝试输出)
注意:悬停将为黑色,红色用于测试。
这里没有解决方案:导航分隔符:(
如果您根本不想要换行符,则可以添加white-space: pre;
到#header .nav a
样式中。
https://developer.mozilla.org/en-US/docs/CSS/white-space
编辑:更优雅的解决方案可能是切换边框方向(border-left
to border-right
,margin-right
to margin-left
:
#header .nav a {
border-right: 2px solid #000000;
font-family: 'Cuprum',sans-serif;
font-size: 14px;
padding: 0 25px;
text-transform: uppercase;
}
#header .nav .current-menu-item a, #header .nav a:hover {
background: none repeat scroll 0 0 #FF0000;
border-left: 2px solid #000000;
color: #FFFFFF;
margin-left: -2px;
padding: 14px 25px;
text-decoration: none;
}