JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<nav>
    <ul>
        <li><a href="#">A</a></li>
        <li class="B">
            <a href="#">B</a>
            <ul class="subNav">
                <li><a href="#">F</a></li>
                <li><a href="#">G</a></li>
                <li><a href="#">H</a></li>
                <li><a href="#">I</a></li>
            </ul>
        </li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
        <div class="clear"></div>
    </ul>
</nav>

CSS

ul {list-style:none;}
nav a {font-size: 18px;font-weight: 400;}
nav ul li {float: left;position: relative;border-right: 1px solid #bed630;padding: 0 10px;}
nav ul li:last-of-type {border: none;padding-right: 0;}
nav ul li.B:hover .subNav {display: block;}
nav ul li .subNav {display: none;position: absolute;width: 250px;padding: 10px 0 0;}
nav ul li .subNav li {float: none;padding: 0;border: none;margin: 0 0 5px;}