Question

这是我的第一个问题，但我相信还会有更多问题。我有一个小位置问题，我想知道它是否有可能实现。

我有一个带有浮动<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的帖子。

Answer 1

从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属性设置为

Answer 2

即使您设置了right:0，您的left:0仍然会被继承。您需要设置left:auto以覆盖support类的样式。

Answer 3

嗯，很奇怪。我不能告诉你为什么你的代码不起作用，应该工作，因为支持：悬停跨度是一个更具体的选择器。

虽然找到了修复：位置绝对元素左：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}

根据类别，在span标记上从左到右更改绝对位置

3 个答案: