CSS 菜单导航

Question

我无法理解这些代码的含义 -

1) .main ul ul,
2) .main ul li:悬停 ul ul
3) .main ul li:hover ul
4) .main ul ul li:hover ul

这些代码用于隐藏或显示菜单&子菜单。熟悉 CSS 的人都知道这些代码。我想了很多，但无法清楚地理解！ 这是因为上面的代码是以这种方式应用的 -

.main ul ul,
.main ul li:hover ul ul 
{display: none;}

再说一遍 -

.main ul li:hover ul,
.main ul ul li:hover ul
{display:block;}

我的问题是，如果有 2 个 ul，我们只需使用“.main ul ul”&然后在下一行我们使用悬停。
但是如果不将鼠标悬停在上面，我们如何才能获得 2 个 ul 呢？ 我的意思是第一行应该是 ul:hover ul，不是吗？
另外，如果前两行（即- .main ul ul， .main ul li:hover ul ul ) 用于 display:none ，那么为什么相同的两行不用于 display:block ？？？因为它们应该暗示相同的子菜单？

这里 .main 是一个像这样的 div 类 -

 <div class="main">
  <ul>
    <li>..</li>
    <li>..</li>
     <li>..</li>
        <ul>
           <li>sub-menu1</li>
           <li>sub-menu2</li>
        .
        . 
        .
     </ul> etc etc...
<div> 

实际上这是一种带有子菜单的垂直列表菜单。 希望你们都能明白我的意思。简单来说，我的问题是这个问题开头的前 4 行代码是什么意思？ 请详细解释。 提前致谢

Answer 1

1) .main ul ul 指的是：

<div class="main">
    <ul>
        <li>
            **<ul>** ... **</ul>**
            **<ul>** ... **</ul>**
        </li>
    </ul>
    ...
</div>

2) .main ul li:hover ul ul 指的是以下内容，仅当鼠标位于第一级

上时（用 1 个星号标记） ，请注意这个

比上一个示例更深一层

<div class="main">
    <ul>
        *<li>*
            <ul>
                <li>
                    **<ul>**...**</ul>**
                    **<ul>**...**</ul>**
                </li> 
            </ul>
            <ul> ... </ul>
        *</li>*
    </ul>
    ...
</div>

3) .main ul li:hover ul 指的是**

** 当鼠标悬停在 *
• * 上时

<div class="main">
    <ul>
        *<li>*
            **<ul>**
                .
                .
                . 
            **</ul>**
            **<ul>** ... **</ul>**
        *</li>*
    </ul>
    ...
</div>

4) .main ul ul li:hover ul 指的是 **

** 当您的鼠标悬停在最后一个示例中的 *
• * 上时，请注意更深层次的
• 代码>现在是响应鼠标的焦点：

<div class="main">
    <ul>
        <li>
            <ul>
                *<li>*
                    **<ul>**...**</ul>**
                    **<ul>**...**</ul>**
                *</li> *
            </ul>
            <ul> ... </ul>
        </li>
    </ul>
    ...
</div>

Answer 2

编辑：感谢您编辑您的原始帖子 - 我将尝试回答您的更多问题：

问题：

如果有 2 个 ul，我们只需使用“.main ul ul”&然后在下一行我们
使用悬停。但是如果不将鼠标悬停在上面，我们如何获得 2 个 ul？

您想知道为什么仅在第二个无序列表 (UL) 上调用悬停属性，以及如何在第一个无序列表上没有悬停属性的情况下显示第二个 ul。答案是这些无序列表默认是可见的。因此，它们都会在页面加载时显示。悬停属性只是告诉您的页面当用户将鼠标悬停在第二个列表上时如何反应。

我不完全确定你的问题以及它在问什么。如果您想了解每个 CSS 属性的用途，我可以帮助您解释。您的 DIV 容器的类名称为 .main。

1) .main ul ul - 这正在调用另一个无序列表中的无序列表，该无序列表是“.main”类的一部分。

2) .main ul li:hover - 这是调用第一个无序列表中的一个列表项的悬停属性。

因此，基本上每一顶行都引用不同的项目或项目中的不同属性（全部在 .main DIV 内）。

Answer 3

步步。让我们首先检查一下

  .main ul ul, .main ul li:hover ul ul {display: none;}

它的作用，它隐藏了所有嵌套列表。请注意，可能存在这样的东西：

<ul id="first">
 <li>
  <ul id="second">
   <li>
     <ul id="third">
        ...

“第三”列表也满足“ul ul”。你能看到，“第三”在“第二”里面吗？这并不重要，这是在开头。它是与您输入的内容相同，

  div{ ... }

它将适用于每个 div，无论它是否位于任何其他元素内，

  div div{ ... } would apply to all elements in such structure:

 <any number of any tags>
  <div>
   <optional any number of any tags>
    <div class="applied">
      <div class="applied">
        ....
         <div class="applied">

这很简单。
现在，.main ul li:hover ul ul 遵循相同的模式，但它从 li:hover 开始计数。假设您有 5 级菜单，并将鼠标悬停在第三级内。那么这个公式所做的就是简单地隐藏第五层。