CSS 菜单导航

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

这些代码用于隐藏或显示菜单和子菜单。了解 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”，然后在下一行我们使用 hover。
但是如果不悬停我们怎么能得到 2 个 ul？ 我的意思是它应该是 ul:hover ul 在第一行，不是吗？
另外，如果前两行(即-.main ul ul， .main ul li:hover ul ul ) 用于 display:none ，那么为什么相同的 2 行不用于 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 引用以下内容，仅当鼠标悬停在第一层上时<li> (标有 1 个星号)，注意这个 <ul>是最后一个例子的另一个更深层次

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

3) .main ul li:hover ul 指的是**<ul>**当您的鼠标悬停在 *<li>* 上时

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

4) .main ul ul li:hover ul 指向**<ul>**当您的鼠标悬停在 *<li>* 上时在最后一个示例中，请注意更深一层 <li>现在是对鼠标焦点的响应:

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