Create a menu using pure css and 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

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 2

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 3

HTML

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

CSS

.menu li > ul {
    display:none;
}

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

LIVE

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;
}