How to construct multilevel menu using CSS only?

Question

I have a problem in my CSS. I am creating a vertical menu but my problem is I don't know how to align the second level of categories, with the first. This is also a problem going from the second level to a third level; it also align to the parent level.

My format is like this:

Parent 1
   - Second Level 1
      - Third Level 1
      - Third Level 2
      - Third Level 3
Parent 2
   - Second Level 2
      - Third Level 1
      - Third Level 2
      - Third Level 3

Here's my desired output:

enter image description here

Here's my CSS:

#category-navigation ul ul { display: none }
#category-navigation ul li:hover > ul { 
    display: inline-block;
    position: absolute;
    background-color: #F5F5F5;
    border: 1px solid #CCC;
    top: 20px;
    left: 15%;
    z-index: 4;
    width: 30%;
    box-shadow: 5px 5px 5px #CCC;
}

#category-navigation ul.parent { 
    border-bottom: 1px solid #ccc; 
    padding: 7px 0px;
}

#category-navigation ul.parent li { 
   border-bottom: 1px solid #ccc; 
   padding: 7px 0px; 
}

Here's the fiddle of my code:

http://jsfiddle.net/rochellecanale/4fh680uv/8/

How do I fix the alignment?

Lars Ebert-Harlaar · Accepted Answer · 2015-03-20 08:13:32Z

5

You should give the li elements in the first layer position: relative. That way, the positioning of the child ul elements is relative to the li elements.

To position the child ul elements next to the li elements, you then could give them

top: 0px;
left: 100%;

I updated the jsfiddle accordingly. Please note that this needs some additional tweaking to look really good, but I will not do all the work for you.

answered Mar 20, 2015 at 8:13

Lars Ebert-Harlaar

3,5373 gold badges26 silver badges47 bronze badges

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

5 Comments

Jerielle Over a year ago

Thanks sir, I am really poor in css. :)

avnaveen Over a year ago

Even your html isnt perfect. Please follow the correct syntax while closing the tags.

Jerielle Over a year ago

Ok Im sorry for that. :)

avnaveen Over a year ago

I have modified the code and added some css. Check this link codepen.io/anon/pen/MYZvyQ

Miro Over a year ago

^ Goodjob. I was just going to point out how bad his mark-up is <li> <a href="http://">Women's Shoes</li></a>

Sateesh · Accepted Answer · 2015-03-20 08:24:51Z

0

Please check out this updated code

    #category-navigation ul li{position:relative; width: 100%; display: inline-block;}
    #category-navigation ul ul { display: none; }
    #category-navigation ul li:hover > ul { 
        display: inline-block;
        position: absolute;
        background-color: #F5F5F5;
        border: 1px solid #CCC;
        top: 0;
        left: 100%;
        z-index: 4;
        width: 100%;
        box-shadow: 5px 5px 5px #CCC;
    }

answered Mar 20, 2015 at 8:24

Sateesh

1,32610 silver badges13 bronze badges

1 Comment

AncientSwordRage Over a year ago

Could you explain what you've changed, and why that achieves what the asker wanted?

Collectives™ on Stack Overflow

How to construct multilevel menu using CSS only?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related