JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<nav>
    <ul class='level0'>
        <li><a href='#'>ITEM1</a>
            <ul class='level1'>
                <li><a href='#'>Level1 - Item1</a>
                    <ul class='level2'>
                        <li><a href='#'>Level2 - Item1</a></li>
                        <li><a href='#'>Level2 - Item2</a></li>
                        <li><a href='#'>Level2 - Item3</a></li>
                        <li><a href='#'>Level2 - Item4</a></li>
                    </ul>
                </li>
                <li><a href='#'>Level1 - Item2</a>
                    <ul class='level2'>
                        <li><a href='#'>Level2 - Item1</a></li>
                        <li><a href='#'>Level2 - Item2</a></li>
                        <li><a href='#'>Level2 - Item3</a></li>
                        <li><a href='#'>Level2 - Item4</a></li>
                    </ul>
                </li>
                <li><a href='#'>Level1 - Item3</a>
                    <ul class='level2'>
                        <li><a href='#'>Level2 - Item1</a></li>
                        <li><a href='#'>Level2 - Item2</a></li>
                        <li><a href='#'>Level2 - Item3</a></li>
                        <li><a href='#'>Level2 - Item4</a></li>
                    </ul>
                </li>
                <li><a href='#'>Level1 - Item4</a>
                    <ul class='level2'>
                        <li><a href='#'>Level2 - Item1</a></li>
                        <li><a href='#'>Level2 - Item2</a></li>
                        <li><a href='#'>Level2 - Item3</a></li>
                        <li><a href='#'>Level2 - Item4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href='#'>ITEM2</a>
            <ul class='level1'>
                <li><a href='#'>Level1 - Item1</a>
                    <ul class='level2'>
                        <li><a href='#'>Level2 - Item1</a></li>
                        <li><a href='#'>Level2 - Item2</a></li>
    ...

CSS

nav {
    position:absolute;
}
.level0, .level1, .level2 {
    width:270px;
    padding:0;
    margin:0;
    position:absolute;
    top:0;
    list-style:none;
}
.level1, .level2 {
    left:270px;
    display:none;
}
.level0 {
    left:0px;
}
.level0 {
    background:#fafafa;
}
.level0 li:hover {
    background:#ddd;
    color:#f00;
}
.level1 {
    background:#ddd;
}
.level1 li:hover {
    background:#bbb;
    color:#f00;
}
.level2 {
    background:#bbb;
}
.level2 li:hover {
    background:#a2a2a2;
    color:#f00;
}
nav li {
    display:block;
    font-weight:normal;
    font-family:sans-serif;
    font-size:13px;
    color:#000;
}
li:hover>ul {
    display:block;
}
li a {
    display:block;
    padding:13px;
    color:inherit;
    text-decoration:none;
}