JSFiddle - React, Tailwind, and code Playground

by Slava Fomin II

HTML

<body>
    <nav>
        <ul>
            <li> <a href="#">Home</a></li>
            <li> <a href="#">Video</a>
                <ul class="sub">
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Tutorial</a></li>
                </ul>
            </li>
            <li> <a href="#">Video</a>
                <ul class="sub">
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Tutorial</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

CSS

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
    color: white;
    background-color: black;
}
nav > ul > li {
    display: inline-block;
    vertical-align: top;
}
.sub {
  position: absolute;
}
nav > ul > li:hover > .sub {
    display: block;
}