Question

I am looking for a pure CSS solution to hide top level list items in an unordered list. For example:

• Top level item 1
• Top level item 2
  • Sub item 1
  • Sub item 2
  • Sub item 3
• Top level item 3

Becomes…

• Sub item 1
• Sub item 2
• Sub item 3

Initially I figured I this would be quite simple. I created a simple little example like so…

<ul>
  <li> Top level item 1
  <li> Top level item 2
  <ul>
    <li> Sub item 1
    <li> Sub item 2
    <li> Sub item 3
  </ul>
  <li> Top level item 3
</ul>

Styling it using something like…

.menu ul{
    display:none;
}
.menu ul li ul{
    display:inline-block;
}

…but it seems that if the parent ul is hidden then I can’t show the child ul. Any suggestions?

Answer 1

I think the only way to do what you want without requiring javascript and html changes in your structure is that way.

DEMO