CSS hover list only

Question

I'm having problems with the CSS polling menu.

I have seen this a lot, and there are tutorials, but there is so much unnecessary code, and it's hard for me to distinguish which one is the necessary code, and which is just different CSS.

I would like to have a CSS hover menu just because there are a lot of users on the website I work for that intentionally have the script disabled (JavaScript).

I don’t understand, in CSS, how you can create a “submenu” under its parent element “List” when the user hovers over the element of the parent list. Can someone please help me understand how this works in CSS?

Below is an image of what I mean:

Answer 1

The following will work in its basic form, but style for your own tastes (position, borders, colors, 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 CSS:

 ul li { position: relative; } ul ul { position: absolute; top: 1em; left: 0; display: none; } ul > li:hover ul { display: block; } 

JS Fiddle demo .