0

代码是这样的，

<style type="text/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;}


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; }
#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 #000 solid; }
li:hover { position:relative; z-index:2000; }
</style>
</head>

<body>
<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>


</body>

在该部分的第三个元素上，如果我"li, li a"删除"li"选择器只留下"li a"这是背景影响，或文本影响，因为我找不到影响我的 2 级列表的因素！

哦，对了，第一级列表项下名为“Menu 1”的第一个菜单是可见的，我认为是因为“li a”选择器，但至于我删除的部分，我没有知道它是如何工作的，有人可以告诉我删除它时是什么导致了这个问题吗？

4

2 回答 2

1

您仅将a标签应用于“菜单 1”的第一个子项。并且您通过以下代码将文本颜色设置为白色（#FFF）：

#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }

这就是为什么文本不可见的原因，因为背景也是白色的。但是当您将鼠标悬停在li's 上时，文本是可见的，因为您通过执行以下操作将背景颜色更改为黑色。

li,li a {color:#000; text-decoration:none;} //assigning text color of li as black

如果您li从上面的代码中删除，则 li 元素内的文本颜色将保持白色，如您在上面的代码中提到的那样。

于 2013-03-07T17:29:09.107 回答
0

该行li, li a表示样式正在应用于所有 LI 和 LI 中包含的所有 A。

你所有的样式都是相对应用的。这意味着应用到的任何内容li, li a都会影响每个 LI 以及嵌套在存在的 LI 中的任何 A。无论是父菜单还是子菜单。

由于.nav是应用于子菜单的类，因此您可以通过包含.nav在选择器中来定位 li。例如：#nav .nav li a

要隐藏您的子菜单，您只需：

#nav li ul.nav { display: none; }

然后让它出现在悬停上（假设这是你想要的）

#nav li:hover ul.nav { display: block; }

我回答了所有问题吗？

于 2013-03-07T17:27:36.523 回答