根据类更改跨度标记上从左到右的绝对位置

Question

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

我有一个带有浮动

的无序列表 (

)，对于主要选项，我将其浮动到左侧，对于联系和支持选项，我将其浮动让它们向右浮动，到目前为止一切顺利。现在我在每个
• 内都有一个 ，它显示在水平列表下，该列表用于菜单。这些 作为菜单选项的描述，对于我使用 position:absolute; 的普通选项。顶部：30px； left:0; 这正如怀疑的那样工作。现在我想更改那些向右浮动的菜单项的位置属性，以便跨度获得 position:absolute;顶部：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 中的最后一行没有区别！ 如果有人有答案或解决方法，我非常感谢您的帮助。

问题得到解答，问题得到解决。检查詹姆斯·阿伦斯或墨卡托的帖子。

Answer 1

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

Answer 2

从该 CSS 来看，您似乎没有正确理解 CSS，或者至少没有正确使用它。您可能需要阅读有关级联、特异性和继承的 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 -class 列表项获取其他列表项获取的所有 CSS，但将 left 属性重置为默认值，并设置 right 属性。

Answer 3

嗯很奇怪。我无法告诉你为什么你的代码不起作用，应该起作用，因为 support:hover span 是一个更具体的选择器。

不过找到了修复方法：
左边的绝对元素位置：0；默认情况下。
如果删除 left: 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}