How to make droppable menu - html

Question

I have a problem. I can't crate my droppable menu.
https://probapro2.blogspot.com/
I work on Menu 1, but I don't know what to add to make the drop menus to move on right.
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css' />
<div class="nav">
<ul class="menu" id="menu">
<li> home </li>
<li class=""> <a class="drop-ctg" href="#">category</a>
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1072; opacity: 0;">
<li> Category 1 </li>
<li> Category 2 </li>
<li> Category 3 </li>
<li> Category 4 </li>
</ul>
</li>
<li class="">
Menu 1
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1069; opacity: 0;">
<li class="dir">
Menu 2
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1070; opacity: 0;">
<li style="margin-left:50px;"> Menu 3 </li>
<li> Menu 3 </li>
<li> Menu 3 </li>
</ul>
</li>
<li class=" "> Menu 2 </li>
<li> Menu 2 </li>
<li> Menu 2 </li>
</ul>
</li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li> Menu 4 </li>
<li> 404 Error Page </li>
</ul>
</div>
Here JS fiddle: https://jsfiddle.net/0ugodkb3/2
I want to make Menu 1 to have a droppable menu with menu 2 and on first menu 2, I want to show menu 3.

Answer 1

You can use for that css rule transform with translate value like this:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
.menu > li > ul {
display: none;
}
.menu > li > ul > li > ul {
transform: translate(100%,0);
display: none;
margin-top: -37px;
}
.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
display: block;
}
<div class="nav">
<ul class="menu">
<li>
home
</li>
<li class="">
<a class="drop-ctg" href="#">category</a>
<ul>
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>
Category 3
</li>
<li>
Category 4
</li>
</ul>
</li>
<li>
Menu 1
<ul>
<li class="dir">
Menu 2
<ul>
<li>
Menu 3
</li>
<li>
Menu 3
</li>
<li>
Menu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 2
</li>
<li>
Menu 2
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
<li>
Menu 4
</li>
<li>
404 Error Page
</li>
</ul>
</div>
The main thing is to use > selector when defining the display rule for nested menus. This is all what I've added to your css code:
.menu > li > ul {
display: none;
}
/* Position for the 3rd level menu */
.menu > li > ul > li > ul {
transform: translate(100%,0);
display: none;
margin-top: -37px;
}
.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
display: block;
}

Answer 2

There are a few things that go into making a dropdown menu. It sounds like you're trying to make a dropdown menu that opens up nested menus.
Each pop-out menu will need to:
1) Know the position of the parent that is opening the menu to know where it should be appended.
2) Calculate where the nav should pop up based on where there user is on the browser/screen
You need to append the nav on the right of the menu header you want to open. I'm not sure what your restrictions are but there are vanilla js options:
https://gomakethings.com/how-to-insert-an-element-after-another-one-in-the-dom-with-vanilla-javascript/
that you can use, and also use a mix of position: relative; and position: fixed; to add your nested menus to the right of it's parent.
I would strongly urge you to consider if creating a custom, nested dropdown menu is the right option for you. There are many options out there that have been battle-tested through time. Normally these will also let you style the menu header, and also it's children.
Let me know if you have any more questions :)