Help create a three-level menu on css on the similarity of this:

enter image description here

Closed due to the fact that off-topic participants rdorn , Alexey Shimansky , user207618, D-side , insolor Sep 5 '17 at 17:07 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • "The message contains only the text of the task, in which there is no description of the problem, or the question is purely formal (" how do I do this task ") . To reopen the question, add a description of the specific problem, explain what does not work, what you see the problem. " - rdorn, Alexey Shimansky, Community Spirit, D-side, insolor
If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    Everything is actually very simple, and no js is needed. Normal css inheritance

    *{ margin:0; padding:0; box-sizing:border-box; } .main-menu{ width:500px; height:50px; background-color:#444; display:flex; list-style:none; font-family:arial; color:#eee; justify-content: space-around; margin: auto; } .main-menu > .main-list{ line-height:50px; width:100%; text-align:center; cursor:pointer; } .main-menu > .main-list:hover{ background-color:#eee; color:#555; } .main-menu > .main-list > .second-menu{ display:none; list-style:none; } .main-menu > .main-list:hover > .second-menu{ display:block; } .main-menu > .main-list > .second-menu > .second-list:hover{ background-color:#ddd; } .main-menu > .main-list > .second-menu > .second-list{ height:50px; background-color:#eee; } .main-menu > .main-list > .second-menu > .second-list > .third-menu{ display:none; margin-left:100%; margin-top:-50px; list-style:none; color:#eee; } .main-menu > .main-list > .second-menu > .second-list > .third-menu > .third-list{ text-align:center; width: 150px; background-color:#777; } .main-menu > .main-list > .second-menu > .second-list > .third-menu > .third-list:hover{ background-color:#566 } .main-menu > .main-list > .second-menu > .second-list:hover > .third-menu{ display:block; } 
     <ul class="main-menu"> <li class="main-list">Menu 1 <ul class="second-menu"> <li class="second-list">Second <ul class="third-menu"> <li class="third-list">Third</li> </ul> </li> <li class="second-list">Second <ul class="third-menu"> <li class="third-list">Third</li> <li class="third-list">Third</li> <li class="third-list">Third</li> <li class="third-list">Third</li> </ul> </li> </ul> </li> <li class="main-list">Menu 2 <ul class="second-menu"> <li class="second-list">Second <ul class="third-menu"> <li class="third-list">Third</li> </ul> </li> <li class="second-list">Second <ul class="third-menu"> <li class="third-list">Third</li> <li class="third-list">Third</li> <li class="third-list">Third</li> <li class="third-list">Third</li> </ul> </li> </ul> </li> <li class="main-list">Menu 3</li> </ul>

    • Thank you very much! - Vladimir Balatsel