JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu-container">
<ul class="menu clearfix">
<li><a href="#">Item 1</a>
<!-- Nível 1 -->
<!-- submenu -->
<ul class="sub-menu clearfix">
<li><a href="#">Sub 1</a>
<!-- Nível 2 -->
<!-- submenu do submenu -->
<ul class="sub-menu">
<li><a href="#">Sub Sub 1</a>
<!-- Nível 3 -->
<!-- submenu do submenu do submenu -->
<ul class="sub-menu">
<li><a href="#">Sub Sub Sub 1</a>
<li><a href="#">Sub Sub Sub 2</a>
</li>
</ul><!-- submenu do submenu do submenu -->
</li>
<li><a href="#">Sub Sub 2</a></li>
</ul><!-- submenu do submenu -->
</li>
<li><a href="#">Sub 2</a></li>
</ul><!-- submenu -->
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
CSS
body,
.menu,
.sub-menu {
margin: 0;
padding: 0;
}
.clearfix:after{
content: '.';
display: block;
clear: both;
height: 0;
line-height: 0;
font-size: 0;
visibility: hidden;
overflow: hidden;
}
.menu,
.sub-menu {
list-style: none;
background: #000;
}
.sub-menu {
background: #444;
}
.menu a {
text-decoration: none;
display: block;
padding: 10px;
color: #fff;
font-family: sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}
.menu li {
position: relative;
}
.menu > li {
float: left;
}
.menu > li:hover {
background: #444;
}
.menu li:hover > .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
min-width: 150px;
}
.sub-menu li:hover {
background: #555;
}
.sub-menu .sub-menu {
top: 0;
left: 100%;
}