0

我从一个解释如何创建纯 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弄乱布局的，我提出了一些理论，但我似乎无法证明它们，因为它们与我学到的一些东西相矛盾，我真的需要某种方式给我解释一下，我要疯了！

如果有人请，谢谢。

4

1 回答 1

0

你有：

#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 优先级”来阅读这些内容，例如：http ://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

于 2013-03-02T13:47:12.373 回答