这是我的第一个问题,但我相信还会有更多问题。 我有一个小位置问题,我想知道它是否有可能实现。
我有一个带有浮动<ul>
s的无序列表(<li>
),对于主要选项,我将它们向左浮动,对于联系和支持选项,我将它们向右浮动,到目前为止一切顺利。现在我在<span>
内有一个<li>
,我在水平列表下显示,列表是一个菜单。这些<span>
用作菜单选项的描述,以及我使用的position:absolute; top:30px; left:0;
正常选项。现在我想更改那些我向右浮动的菜单项的位置属性,以便跨度得到position:absolute; top:30px; right:0;
,这根本不起作用。似乎用一个更具体的css规则来改变它是不可能的,然而另一个,但浮动效果很好。
html:
<div id="menu">
<ul>
<li>Menu1<span>Info1</span></li>
<li>Menu2<span>Info2</span></li>
<li class="support">Support1<span>Info3</span></li>
</ul>
css:
#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}
css的最后一行没什么区别! 如果有人有答案或解决方法,我非常感谢你的帮助。
回答问题并解决问题。查看James Arons或mercator的帖子。
答案 0 :(得分:6)
从CSS来看,你似乎没有正确理解CSS,或者你至少没有正确使用它。您可能需要阅读有关the cascade, specificity and inheritance的SitePoint文章以获得详细介绍。
不起作用的原因是因为该CSS的最后两个行适用于具有support
类的列表项。倒数第二行适用于所有列表项,然后最后一行添加到support
列表项的行。因此,由于最后一行中没有left
属性,left
属性会从上一行向下级联,使其left: 0
。
当您使用类来标记特殊情况时,您不应该重复一般情况的所有CSS,而只是提供更改它所需的CSS:
#menu ul li:hover span {display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span {left:auto; right:0;}
CSS将意味着support
- 类列表项获取其他列表项获得的所有CSS,但left
属性重置为默认值,而right
属性设置为
答案 1 :(得分:5)
即使您设置了right:0
,您的left:0
仍然会被继承。您需要设置left:auto
以覆盖support
类的样式。
答案 2 :(得分:0)
虽然找到了修复: 位置绝对元素左:0;默认情况下。 如果你删除左:0;从跨度选择器它将工作。
您的代码如下所示:
#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}