我不能推斷出背後的功能，需要專家的幫助

Question

這是我從教程網站複製的一小段代碼，解釋瞭如何創建一個純粹的CSS水平菜單，就在我想我終於明白它是如何工作，我發現了這個東西，現在基本上我試圖反思我在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; } 

它變得比第一個更具體，取而代之的是優先於第一個。這就是定位改變的原因。 http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/