Create A Menu Using Pure Css And Html

I have a menu structure like this :

• item1
  • subitem1
  <

Solution 1:

HTML

<ulclass="menu"><li>
    item1
    <ul><li><ahref="#">subitem1</a></li><li><ahref="#">subitem2</a></li><li><ahref="#">subitem3</a></li><li><ahref="#">subitem4</a></li><li>
        item2
        <ul><li><ahref="#">subitem5</a></li><li><ahref="#">subitem6</a></li><li><ahref="#">subitem7</a></li><li><ahref="#">subitem8</a></li></ul></li></ul></li></ul>

CSS

.menuli > ul {
    display:none;
}

.menuli:hover > ul {
    display:block;
}

LIVE

Solution 2:

Something like this? (Without changing your html)

CSS:

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

DEMO 1

---

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

ulliul {display:none;}
ul > li:hoverul{display:block;}
ul > li > ul > li > ul > li{display:none;}
ul > li:hoverul > li:hoverulli{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 <ul class"menu"> to <ul class="menu">(By adding the = to it)

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

DEMO 3

Solution 3:

fiddle: http://jsfiddle.net/Z22kH/

html:

<ulclass="menu"><li><a>item1</a><ulclass="sub-ul-1"><li><a>subitem1</a></li><li><a>subitem2</a></li><li><a>subitem3</a></li><li><a>subitem4</a></li><li><a>item2</a><ulclass="sub-ul-2"><li><a>subitem5</a></li><li><a>subitem6</a></li><li><a>subitem7</a></li><li><a>subitem8</a></li></ul></li></ul></li></ul>

css:

ul.menuli{
 display: none;
}
ul.menu > li{
 display: block;
}
ul.menu > li:hover > ul > li,
ul.menuul > li:hover > ul > li{
  display:block;
}

Solution 4:

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 */.menuul {
    display: none;
}

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