html - 我无法推断出这背后的功能，需要专家协助

Question

我从一个教程网站复制的这段小代码解释了如何创建一个纯 CSS 水平菜单，就在我以为我终于明白它是如何工作的时候，我发现了这个东西，基本上现在我正在尝试反射(reflection)我在 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; }

它变得比第一个更具体，并且优先于第一个。这就是定位发生变化的原因。

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