Two classes next to each other in CSS

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navigation_desktop">

    <div class="button">1.0 Main Menu
        <div class="FadeItem">
            <ul>
                <li>1.1 Sub Menu </li>
                <li class="button">1.2 Sub Menu
                    <div class="FadeItem">
                        <ul>
                            <li>1.2.1 Sub Menu</li>
                            <li>1.2.2 Sub Menu</li>
                        </ul> 
                    </div>
                </li> 
            </ul>
        </div>
    </div>
</div>

CSS:

 .button {
 float: left;
 position: relative;
 padding-left: 1%;
 padding-right: 1%;
 cursor: pointer;
 }

.FadeItem {
display: none
}

.FadeItem .FadeItem {
position: absolute;
left: 100%;
top: 0;
width: 130px;
height: 100%;
}

jQuery:

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".FadeItem").fadeIn(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".FadeItem").fadeOut(500);
  });
});

With the code above I let FadeIn/Out some items once I hover over a button. The code works perfectly but I have a general question regarding the coding of the CSS in the example above.

In the CSS there is this part:

.FadeItem .FadeItem {
}

When do you create a CSS code like this? What does it trigger?

I am a newbie to the CSS programming and so far I only used one class or two classes divided by a comma. I want to improve my coding knowledge so it would be cool if you could give me an explanation about the code above.

The code you can also find here: https://jsfiddle.net/gge42bob/3/