What is meaning of following code: ul li ul, ul li:hover ul li ul { }

Hi ravipat,
Firstly the parts separated by the comma and before the { are selectors.
Selectors are used to target elements on the page that you want to style.
The style rules would be between { and }.
In your case the selectors you have are: ul li ul and ul li:hover ul li ul
The first one  ul li ul targets a UL ( unordered list) within LI and another UL. So the second level List container.
The Second ul li:hover ul li ul is targeting another level down only when you are hovering over the parent LI.

You should get the same effect removing the redundant LI in both the selectors as long as they aren't there for specificity.
ul ul, ul li:hover ul ul

You may want to look at Element Selectors and the hover pseudo class