Create submenu under submenu dropdown using CSS - html

Question

In CSS, one submenu (Link 1, Link2, Link3) is available in this link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
I'm trying to create submenu (link 4.1, link4.2) under the above submenu as shown in below image.
how can I get this submenu. .
I've tried below. But this is overlapping. I'm newbie to CSS. please share your ideas
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="dropdown">Link 1</div>
<div class="dropdown-content">
Link 2
Link 3
</div>
Link 2
Link 3
</div>
</div>

Answer 1

This can be done by simple html/css work so just to give an idea here is a simple example:
ul {
list-style: none;
padding: 0;
margin: 0;
background: #000;
}
ul li {
display: block;
position: relative;
float: left;
background: #000;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #001;
}
li:hover>ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #000;
}
li:hover li a:hover {
background: #000;
}
ul ul ul {
left: 100%;
top: 0;
}
<ul>
<li>Home</li>
<li>First level Menu
<ul>
<li>Second Level</li>
<li>Second Level with third level
<ul>
<li>Third level</li>
<li>Third level</li>
</ul>
</li>
</ul>
</li>
</ul>