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

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>