Example I took from here, but from the css and html I deleted parts which are needed for beautification.

HTML should be simple:

    <ul>
        <li>
            Menu 1
            <ul>
                <li>
                    Menu 1 SubMenu 1
                </li>
                <li>
                    Menu 1 SubMenu 2
                </li>
                <li>
                    Menu 1 SubMenu 3
                </li>
            </ul>
        </li>
        <li>
            Menu 2
            <ul>
                <li>
                    Menu 2 SubMenu 1
                </li>
                <li>
                    Menu 2 SubMenu 2
                </li>
            </ul>
        </li>
        <li>Menu 3</li>
    </ul>

CSS:

ul {
    list-style: none; //I dont need bullets
    padding: 0px; //so that submenus are under main menu correctly aligned
}

ul li {
    position: relative;
    float: left;
}

li ul {
    display: none; //sub menus will not be displayed
}

li:hover ul {
    display: block; //display submenus when mouse is over
    position: absolute;
}

Real life example

  • Menu 1
    • Menu 1 SubMenu 1
    • Menu 1 SubMenu 2
    • Menu 1 SubMenu 3
  • Menu 2
    • Menu 2 SubMenu 1
    • Menu 2 SubMenu 2
  • Menu 3

In Chrome browser press F12, switch to computed, click on show inherited, and scroll down until you don't find font size. Taken from here.

EM - Equal to the computed value of the font-size property of the element on which it is used.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="rootSquare"></div>

</body>

</html>

CSS:

.rootSquare {
	border: 1px solid #333;
	height: 1em;
}
Live example:

Notice in this my live example that "rootSquare" div is 14px - that is because parent element's font size is 14 pixels, so that means 1em = parent element font size, if font-size is not defined then default font size is taken

REM - same as the EM the only difference is that it will take font size of the root element which is usually HTML

Here I mentioned "greater than" (or "bigger than") selector, but while I was reading SMACSS I realized that I don't understand some selectors good enough.

So, here are my examples taken from SMACSS.

Same HTML I am going to use, but with different CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="sidebar">
        I am a sidebar div
        <div>
            and I am inner div
            <div>
                and I am third level div
            </div>
        </div>
    </div>
</body>
</html>

1. With "greater than" selector:

CSS:

#sidebar>div {
    border: 1px solid #333;
}

Looks like this:

I am a sidebar div
and I am inner div
and I am third level div

2. With space

CSS:

#sidebar div {
  border: 1px solid #333;
}
Looks like this:
I am a sidebar div
and I am inner div
and I am third level div