Question

这个我从教程网站上复制的小代码，解释了如何创建纯CSS水平菜单，就在我认为我终于明白它是如何工作的时候，我发现了这个东西，基本上现在我和我＃39;我试图反思我在CSS中学到的所有东西，我被卡住了。

基本上代码就像这样，CSS。

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; 
position:relative;}
#nav li ul.first {left:-1px; top:100%;}

li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; 
border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }

和html，

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li><a href="#">Menu 1</a></li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

现在这就是问题开始的地方，在CSS，第9行，是的，在 li:hover > .nav部分，当我将其更改为#nav li:hover > .nav时，下拉菜单只是混乱，它不会表现得像它应该有的那样，我试图揭示如何简单#nav会弄乱布局，我已经提出了一些理论，但我似乎无法证明这些理论，因为它们与我学到的一些东西相矛盾，我真的我需要以某种方式向我解释这一点，我疯了！

如果有人，请，谢谢。

Answer 1

你有：

#nav li ul.first {left:-1px; top:100%;}

和

li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #f00 solid; }

由于第一行更具体，因此其left和top值优先于后一行。将后一行更改为：

#nav li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #f00 solid; }

它比第一个更具体，取而代之的优先于第一个。这就是定位发生变化的原因。

您可以通过Google搜索“css precedence”来阅读这些内容，例如：http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

我不能推断出这背后的功能，需要专家协助

1 个答案: