Create a menu using pure css and HTML - html

Question

I have a menu structure like this :
<ul class"menu">
<li>
<a>item1</a>
<ul>
<li><a>subitem1</a></li>
<li><a>subitem2</a></li>
<li><a>subitem3</a></li>
<li><a>subitem4</a></li>
<li>
<a>item2</a>
<ul class="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>
My requirement is, when I hover on item1 then subitem1,subitem2,subitem3,subitem4 only need to display and subitem5 - 8 no need to display.
When I hover on item2, then only subitem5 - 8 need to display. How can I achieve this by using css?
I have tried:
ul.menu ul{
display: none;
}
ul.menu li:hover:first-child ul {
display:block;
}

Answer 1

HTML
<ul class="menu">
<li>
item1
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
<li>subitem4</li>
<li>
item2
<ul>
<li>subitem5</li>
<li>subitem6</li>
<li>subitem7</li>
<li>subitem8</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.menu li > ul {
display:none;
}
.menu li:hover > ul {
display:block;
}
LIVE

Answer 2

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 <ul class"menu"> to <ul class="menu"> (By adding the = to it)
.menu ul {display:none;}
.menu li:hover > ul{display:block;}
li{cursor:pointer;}
DEMO 3

Answer 3

fiddle: http://jsfiddle.net/Z22kH/
html:
<ul class="menu">
<li>
<a>item1</a>
<ul class="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>
<ul class="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.menu li{
display: none;
}
ul.menu > li{
display: block;
}
ul.menu > li:hover > ul > li,
ul.menu ul > li:hover > ul > li{
display:block;
}

Answer 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 */
.menu ul {
display: none;
}
/* Show any UL which is a direct child of a hovered list-item */
.menu li:hover > ul {
display: block;
}