CSS Menu Navigation

Question

I cannot understand what this codes means -

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

These codes are applied to hide or display menus & sub-menus .Those who are aware of CSS knows well of these codes. I thought much but cannot clearly understand!! This is because the above codes are applied in this way-

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

Then again -

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

My question is,in case of 2 ul's we just use ".main ul ul" & then in the next line we use hover.
But without hovering over how can we get 2 ul's? I mean it should be ul:hover ul in the first line,isn't it?
Also if the first 2 lines(i.e.- .main ul ul, .main ul li:hover ul ul )are used for display:none ,then why the same 2 lines are not used for display:block???Because they should imply the same submenus?

Here .main is a div class like this-

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

Actually this is a type of vertical list menu with submenus. Hope you all get me.In simple words, my question what does the first 4 code lines at the very beginning of this question means? Pls explain in details. Thanks in advance

Answer 1

Edit: Thank you for editing your original post - I will try to answer a few more of your questions:

Question:

in case of 2 ul's we just use ".main ul ul" & then in the next line we use hover. But without hovering over how can we get 2 ul's?

You want to know why the hover property is being called only on the second unordered list (UL), and how the second ul can even be displayed without the hover property being on the first ul. The answer is that these unordered lists are visible by default. Therefore, they will both be displayed when the page is loaded. The hover property just tells your page how to react when the user hovers over the second list.

I'm not completey sure of your queustion, and what it's asking. If you would like to know about what each CSS property is doing I can help to explain that. Your DIV container has a class name of .main.

1) .main ul ul - this is calling what seems to be an unordered list inside of another unordered list which is part of the ".main" class.

2) .main ul li:hover - This is calling the hover property of one of the list items within the first unordered list.

So, basically each of the top lines is referring to either a different item, or a different property within an item (all within the .main DIV).

Answer 2

1) .main ul ul refers to:

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

2) .main ul li:hover ul ul refers to the following, ONLY when the mouse is over the first level <li> (marked with 1 asterick), notice how this <ul> is another level deeper form the last example

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

3) .main ul li:hover ul refers to the **<ul>** when your mouse is over the *<li>*

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

4) .main ul ul li:hover ul refers to the **<ul>** when your mouse is over the *<li>* in this last example, notice how a level deeper <li> is now the responding to afocus of your mouse:

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

Answer 3

Step by step. Let's first examine

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

what it does, it hides all nested lists. Please be aware, that something like thisd" may exists:

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

the "third" list also satisfies "ul ul". Can you see, that "third" is inside "second" ? it does not matter this is in the beginning. It is the same as you type

  div{ ... }

it will apply to every div, no matter if it is inside any other element.

  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 that was easy. Now, .main ul li:hover ul ul follows the same pattern, but it starts counting from li:hover. Imagine you have 5 level menu and you hover li inside third level. Then what this formula does is simple hiding the fifth level.