6

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

<ul>我有一个带有浮动<li>s的无序列表（现在我<span>在每个里面都有一个<li>显示在水平列表下的列表，该列表用于菜单。这些<span>s 用作菜单选择的描述，对于我使用的正常选项，我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 或墨卡托的帖子。

4

3 回答 3

6

从那个 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改为设置属性。

于 2009-11-08T22:27:28.733 回答
6

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

于 2009-11-08T22:54:23.877 回答
0

嗯很奇怪。我不能告诉你为什么你的代码不工作，应该工作，因为 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}
于 2009-11-08T21:55:29.693 回答