Hover-list in CSS Only

Question

I'm having some trouble with CSS rollover menus.

I've seen it a lot, and there are tutorials, but there is so much unnecessary code, and I find it hard to distinguish between which is the needed code, and which is just other CSS.

I'd like to have a hover menu on CSS only because the website I'm working on has a lot of users that intentionally have scripting disabled (JavaScript).

I don't understand, in CSS, how one can make a "sub menu" appear beneath its parent List item when the user hovers over the parent list item. Can someone please help me understand how this works in CSS?

Below is an image of what I am referring to:

Answer 1

The following will work, in its basic form, but style for your own tastes (position, borders, colours, etc):

<ul>
    <li>Simple List item
        <ul>
            <li>sub menu item 1</li>
            <li>sub menu item 2</li>
            <li>sub menu item 3</li>
       </ul>
    </li>
</ul>

With the CSS:

ul li {
    position: relative;
}

ul ul {
    position: absolute;
    top: 1em;
    left: 0;
    display: none;
}

ul > li:hover ul {
    display: block;
}

JS Fiddle demo.