JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="navigation">
    <ul>
        <li>Test 1
            <ul>
                <li><a href="#">SubTest1</a></li>
                <li><a href="#">SubTest2</a></li>
                <li><a href="#">SubTest3</a></li>
                <li><a href="#">SubTest4</a></li>
            </ul>
        </li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4
            <ul>
                
                <li><a href="#">SubTest1</a></li>
                <li><a href="#">SubTest2</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

*{margin:0;padding:0;}
body{
    font-family:Calibri;
}
#navigation{
    margin:0 auto;
    width:100%;
    border:1px solid blue;
}
#navigation ul li{
    margin:0;
    padding:10px;
    list-style:none;
    display:inline;
    float:left;
    width:100px;
    background-color:black;
    color:white;
}
#navigation ul li a{
    display:block;
}
#navigation ul li a:hover{
    background-color:gray;
}
#navigation ul li ul {
    display:none;
    
}
#navigation ul li ul li{
    background-color:gray;
    text-align:center;
    padding:-10px;
}
#navigation ul li:hover ul{
    display:inline;
}