Create a menu using pure css and HTML

Question

I have a menu structure like this :

  

    item1
    

      
subitem1         


        

Answer 1

I've put together a working and minimalistic jsfiddle demo.

You hide all UL's inside .menu. Upon hovering any list-item, you reveal any direct descendant UL. I use display: block; and display: none; for the purpose of keeping it simple.

CSS:

/* Hide all UL's inside .menu */
.menu ul {
    display: none;
}

/* Show any UL which is a direct child of a hovered list-item */
.menu li:hover > ul {
    display: block;
}