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

I could be wrong, but I think you'll need some jQuery in order to get the results you want. — Donovan
– Donovan, Commented Dec 12, 2013 at 18:24
You're missing a = in class"menu". Also you might have forgotten to add class="sub-ul-1" to the second ul. — user2036825
– user2036825, Commented Dec 12, 2013 at 18:28

Mouagip · Accepted Answer · 2013-12-12 18:38:11Z

12

+50

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

answered Dec 12, 2013 at 18:38

Mouagip

5,3993 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carl0s1z · Accepted Answer · 2013-12-12 18:53:59Z

8

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

edited Dec 12, 2013 at 18:53

answered Dec 12, 2013 at 18:26

Carl0s1z

4,7237 gold badges34 silver badges49 bronze badges

Comments

DrCord · Accepted Answer · 2013-12-12 18:36:46Z

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

answered Dec 12, 2013 at 18:36

DrCord

3,9203 gold badges36 silver badges47 bronze badges

Comments

score 3 · Accepted Answer · 2013-12-12 18:44:30Z

3

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

edited Dec 12, 2013 at 18:44

answered Dec 12, 2013 at 18:34

user2036825

Collectives™ on Stack Overflow

Create a menu using pure css and HTML

4 Answers 4

HTML

CSS

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

HTML

CSS

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related