【发布时间】:2011-03-19 21:07:23
【问题描述】:
我目前正在制作一个使用超级鱼的菜单。它可以通过 css 完全自定义,但我遇到了一个非常非常令人沮丧的问题。
第二层菜单不知何故继承了我不知道在哪里的值,而我所做的任何改变都会完全破坏整个布局。看起来好像文本在某种程度上是一整行,然后应该是。但是,鼠标悬停样式正在正常工作。
另一个令人沮丧的事情是我需要将文本从 tier1 菜单项移动到栏的底部 - 到目前为止,我没有尝试过仅移动文本而不是整个项目。如果有人对此有解决方案,也将不胜感激。
你可以明白我的意思:http://redaxo.witconsult.de/ 它涉及菜单项 2 和 5 (Leistungen & Kontakt) 上的 2 级菜单
这是我认为导致问题的代码: 完整代码在这里:http://redaxo.witconsult.de/files/superfish.css
非常感谢!!!
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
text-indent: 7px;
}
.sf-menu a, .sf-menu a:visited {
/* visited pseudo selector so IE6 applies text colour*/
color: #333;
}
.sf-menu li { /*///////////// menu lvl 1 /////////////*/
color: #333;
width: 118px;
line-height: 85px;
font-weight: normal;
font-size: 14px;
text-decoration:none;
background: url(../images/menu/menuitem.png);
}
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
color: #DDD;
line-height: 85px;
background: url(../images/menu/menuitem-mo.png);
}
.sf-menu li li { /*///////////// submenu lvl 2 ///////////////////*/
color: #ddd;
font-size: 12px;
top: 50px;
height: 26px;
background: url(../images/png_black40per.png);
}
.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
color: #333;
line-height: 26px;
background: url(../images/png_white40per.png);
【问题讨论】:
-
Firefox 的 Firebug 扩展应该可以让你看到继承样式的来源。
-
line-height: 85px;这将防止菜单中的文本位于底部。 -
非常感谢! line-height 属性是我问题的根源......我通过将它们替换为“line =”来解决它。但是现在我遇到的问题是所有文本总是在元素的顶部对齐。 valign 不起作用,我看不到任何其他将文本移动到底部/中间的方法。不应该垂直对齐:底部;实现这个?不知何故,文本根本不响应垂直对齐。 :(
标签: css parent-child superfish inheritance