Question

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

1）.main ul ul，
2）.main ul li：hover ul ul
3）.main ul li：hover ul
4）.main ul ul li：hover ul

这些代码用于隐藏或显示菜单＆amp;子菜单。谁知道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”＆amp;然后在下一行我们使用悬停但没有徘徊，我们怎么能得到2 ul？我的意思是它应该是ul：在第一行悬停ul，不是吗？如果前两行（即 - .main ul ul， .main ul li：hover ul ul）用于显示：none，那么为什么相同的2行不用于显示：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

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

<强>问题：

如果是2 ul，我们只使用“.main ul ul”＆amp;然后在下一行我们使用悬停。但是没有徘徊，我们怎么能得到2 ul？

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

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

1）.main ul ul - 这是在另一个无序列表中调用似乎是无序列表的内容，该列表是“.main”类的一部分。

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

所以，基本上每条顶线都指的是一个不同的项目，或一个项目中的不同属性（都在.main DIV内）。

Answer 2

1）.main ul ul指的是：

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

2）.main ul li：hover ul ul指的是以下内容，仅当鼠标位于第一级<li>（标有1 asterick）时，请注意此<ul>是如何处于另一个级别更深层次的最后一个例子

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

3）.main ul li：当鼠标悬停在**<ul>**

时，hover ul指的是*<li>*

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

4）.main ul ul li：当你的鼠标在最后一个例子中的**<ul>**上方时，hover ul指的是*<li>*，注意现在更深层<li>的水平如何回应你的鼠标：

<div class="main">
    <ul>
        <li>
            <ul>
                *<li>*
                    **<ul>**...**</ul>**
                    **<ul>**...**</ul>**
                *</li> *
            </ul>
            <ul> ... </ul>
        </li>
    </ul>
    ...
</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级菜单，你将li悬停在第三级。那么这个公式的作用就是隐藏第五级。

CSS菜单导航

3 个答案:

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