JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="top-level-menu">
<li><a href="hhh">hhh</a>
<ul class="second-level-menu">
<li><a href="uu">uu</a>
<ul class="third-level-menu">
<li><a href="gg">gg</a>
</li>
</ul>
</li>
</ul>
</li>
<li>null</li>
</ul>
CSS
/* Menu Styles */
ul {display: inline;}
ul.third-level-menu::before {
content: '-';
position: relative;
left: -200px;
top: 10px;
}
ul::before {
content: '-';
position: relative;
left: 0px;
top: -20px;
}
.third-level-menu
{
position: absolute;
top: 0;
right: -220px;
width: 220px;
list-style: none;
padding: 0;
margin: 0;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
display: none;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 200px;
list-style: none;
padding: 0;
margin: 0;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
display: none;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 100px;
background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul >li
{
/* On hover, display the next level's menu */
display: block;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }