Create a menu using pure css and HTML

Question

I have a menu structure like this :

  

    item1
    

      
subitem1         


        

Answer 1

Something like this? (Without changing your html)

CSS:

ul li ul {display:none;}
ul > li:hover ul{display:block;}
ul li ul > li > ul.sub-ul-2 {display:none;}
ul > li:hover ul > li:hover ul{display:block;}

DEMO 1

---

Update: (Without using any classes & cursos:pointer;)

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

li{cursor:pointer;}  /* For the hand (cursor) while hover over the li */

DEMO 2

---

Or the short css, after fixing the first ul from

to
(By adding the = to it)

.menu ul {display:none;}
.menu li:hover > ul{display:block;}
li{cursor:pointer;}

DEMO 3