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 в первой строке, не так ли?
Также, если первые 2 строки (т.е. ул. .main ul li: hover ul ul) используются для отображения: нет, тогда почему те же 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

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: hover ul ссылается на **<ul>**, когда ваша мышь находится над *<li>* в этом последнем примере, обратите внимание, как уровень глубже <li> теперь реагирует на фокус вашей мыши :

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

Answer 2

Шаг за шагом.Давайте сначала рассмотрим

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

что он делает, он скрывает все вложенные списки.Пожалуйста, имейте в виду, что что-то вроде thisd "может существовать:

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

OkЭто было легко. Теперь .main ul li: hover ul ul следует той же схеме, но начинает считать с li: hover. Представьте, что у вас есть меню на 5 уровней, и вы наводите li на третьем уровне. Тогда эта формула делает простое скрытиепятый уровень.

Answer 3

Изменить: Спасибо за редактирование вашего исходного сообщения - я постараюсь ответить на еще несколько ваших вопросов:

Вопрос:

в случае 2 ul мы просто используем ".main ul ul" и затем в следующей строке использовать парение Но не зависая над тем, как мы можем получить 2 ul?

Вы хотите знать, почему свойство hover вызывается только во втором неупорядоченном списке (UL), и как можно отобразить второй ul без свойства hover на первом ul. Ответ в том, что эти неупорядоченные списки видны по умолчанию. Поэтому они оба будут отображаться при загрузке страницы. Свойство hover просто говорит вашей странице, как реагировать, когда пользователь наводит курсор на второй список.

Я не совсем уверен в твоей усталости и в том, что она спрашивает. Если вы хотите узнать, что делает каждое свойство CSS, я могу помочь объяснить это. Ваш контейнер DIV имеет имя класса .main.

1) .main ul ul - это вызов неупорядоченного списка внутри другого неупорядоченного списка, который является частью класса ".main".

2) .main ul li:hover - это вызов свойства hover одного из элементов списка в первом неупорядоченном списке.

Таким образом, в основном каждая из верхних строк относится либо к другому элементу, либо к другому свойству внутри элемента (все в пределах .main DIV).