JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">the Company</a></li>
            <li><a href="#">the Founder</a></li>
        </ul>
    </li>
</ul>

CSS

ul {
    margin:0;
    padding:0;
    height:1em;
}
ul li {
    list-style:none;
    float:left;
}
ul li:hover ul {
    display:block;
    position:absolute;
    margin:0;
    padding:0;
}
ul li:hover ul li {
    float:none;
}
ul li:hover ul li a:hover {
    background-color:red;
}
ul li a {
    display:block;
    padding: 3px 8px;
    background-color:blue;
    color:white;
    text-decoration:none;
}

ul li ul {
    display:none;
    width: 7.5em;
    background-color:green;
}