css multiple selectors explanation

Question

I m trying to get my head around CSS. I found a navigation menu that I would like to use but some things aren't working yet and there are a lot of things that confuse me.

is there a reason why li is two times in this part of the code ?

/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}

and this part I don't understand at all. does this mean hover state for only a selector or does it mean hover state for ul, li and a selectors ?

ul li a:hover + .hidden, .hidden:hover {
display: block;
}

I have been following the css tutorial from w3schools but I didn't see anything that explains the things I don't understand. Full code is here

/*horizontal navigation style*/
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul {
    position: static;
    display: none;
    }
    /*Create vertical spacing*/
    li {
    margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
    width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
    display:block;
    }
}

Answer 1

li ul li {
  display: block;
  float: none;
}

It means it will target all the <li> elements which are inside li ul..The css are always applied to the last selector in the expression. See example below

Stack Snippet

li {
  color: blue;
}

li ul li {
  color: red;
}

<ul>
  <li>Menu
    <ul>
      <li>Submenu</li>
      <li>Submenu</li>
      <li>Submenu</li>
    </ul>
  </li>
</ul>

---

ul li a:hover + .hidden, 
.hidden:hover {
  display: block;
}

Here you are applying same styling to two elements using ,(comma) separator...

1: using + i.e adjacent sibling selector...it separates two selectors and matches the second element only if it immediately follows the first element, means here <a> and .hidden sholud be both adjacent elements.

2: is .hidden:hover means it will work only when you hover only .hidden element.

.hidden {
  display: none;
}

ul li a:hover+.hidden {
  display: inline-block;
  background: red;
}

<ul>
  <li><a>Hover Here</a><span class="hidden">hidden</span></li>
</ul>

Answer 2

li ul li {
    display: block;
    float: none;
}

this code means there is two list one of them includes the other first, li is the parent and the term 'ul li' is the sublist from it the first li is the basic menu and the other is the dropdown

---

ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

this code means there are two cases of hover once when hovering on "ul li a" which is part of a list and other on his siblings '.hidden' which refer to it here by using "+" assignment

Answer 3

Isn't that hard to understand, just see it as 'items' that are separated by white spaces ' ', it means, that each word separated by a space, it's an item. Then, see that the first item is the 'parent' item, and it's immediately right item is it's child (or inner item), and so on.

So, in your first example:

 li ul li {
  display: block;
  float: none;
 }

you have li, then ul, and then li again, it means that it is looking for all li tags inside an ul tag, which it is inside an il tag itself (reading from right to left). It would be something like:

<li>
 <ul>
  <li>this is the selected item</li>
  <li>this is the selected item</li>
  <li>this is the selected item</li>
 </ul>
</li>

For the later case, it's the same, the only difference is the use of subclasses selectors (like hover), and the comma. When using the comma it means that you're going to add a new group of selectors, it means that the selectors separated by comma aren't in any way related between them. So you have two groups:

ul li a:hover + .hidden

and

.hidden:hover

the first one means "select all the items with .hidden class, that are immediately children(+) of an 'a' tag which is being hovered, and this 'a' tag must be inside a li tag, and this later inside a ul tag"

it would be something like:

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this don't cause it's not an immediate child </span>
  <a>
 </li>
</ul>

And finally the second case it's simpler, it says (remember, read from right to left) "select all items being hovered by mouse and with hidden class". If we use the above example:

<ul>
 <li>
  <a>
   <span class="hidden" >this part is selected if mouse hovers</span>
   <span class="hidden" >this part is selected TOO if mouse hovers </span>
  <a>
 </li>
 <li class="hidden">
  this part is selected TOO if mouse hovers
 </li>
</ul>

Hope I explained well myself