JSFiddle - React, Tailwind, and code Playground

by williamtdavies

HTML

<nav id="topmenu" role="navigation">
<div id="nav" class="menu-container">
    <ul id="menu-main" class='menu-main'>
        <li id="menu-item-1" class="current-menu-item menu-item-1"><a href="#">News</a></li>
        <li id="menu-item-2" class="menu-item-2"><a href="#">Services</a>
        <ul class="sub-menu">
            <li id="menu-item-4" class="menu-item-4"><a href="#">Contact</a></li>
        </ul>
        </li>
        <li id="menu-item-3" class="menu-item-3"><a href="#">About us</a>
        <ul class="sub-menu">
            <li id="menu-item-4" class="menu-item-4"><a href="#">Contact</a></li>
        </ul>
        </li>
    </ul>

CSS

ul{
        padding: 0;
        list-style: none;
    }
    ul li{
        float: left;
        width: 100px;
        text-align: center;
        line-height: 21px;
        position:relative;
    }
    #topmenu #nav ul li a{
        display: block;
        padding: 5px 10px;
        color: #333;
        background: #f2f2f2;
        text-decoration: none;
    }
    #topmenu #nav ul li a:hover{
        color: #fff;
        background: #939393;
    }
    #topmenu #nav ul li ul{
        position:absolute;
        left:-999em;
    }
    #topmenu #nav ul li:hover ul{
        left:0; /* display the dropdown */
    }