CODEWITHSUNDEEP
css
Joe
Joe

Reputation: 1055

Pure CSS Responsive Multilevel Menu

I'm trying to modify This project of Osvaldas Valutis adding a 3rd and 4th level, but my css knowledge is not so deep and the result, as you can see HERE is very poor:

besides HTML, on CSS side I added

* third level */

#nav li li li{
    background-color: #cc470d;
    display: none;
    position: absolute;
    top: 100%;
}
#nav li li:hover li {
    display: block;
    left: 2px;
    top:0px;
    right: 0;
}
#nav li:not( :first-child ):hover ul li ul li {
    left: 240px;
    top:-50px;
}
#nav li ul li ul a {
    font-size: 1.25em; /* 20 */
    border-top: 1px solid #e15a1f;
    padding: 0.75em; /* 15 (20) */
}

#nav li ul li ul li a:hover, #nav li ul li ul:not( :hover ) li.active a {
    background-color: #e15a1f;
}

but clearly it is not enough, and then I have to handle also the @media versions.

can please suggest what need to add

Upvotes: 0

Views: 1017

Answers (1)

Ross
Ross

Reputation: 141

You could apply fixed widths to the dropdowns, then adjust the margins to position them correctly.

Change your code for the third level #nav li li li to this:

/* third level */

#nav li li li {
    background-color: #cc470d;
    display: none;
    position: absolute;
    top: 100%;
    width: 240px; /* will also set width for child dropdown */
    margin-top: -1px;
    margin-left: 2px;
}

And add this for the fourth level:

/* fourth level */

#nav li li li li {
  margin-left: 1px;
}

Upvotes: 1

Related Questions