JSFiddle - React, Tailwind, and code Playground

by neo2014

HTML

<ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li> <a href="#">Products</a>

        <ul>
            <li><a href="#">Laptops</a>
            </li>
            <li><a href="#">Monitors</a>
            </li>
            <li><a href="#">Printers</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a>
    </li>
</ul>
<div id="box">
    <p>some content goes here ! lorem ipsum dolor</p>
</div>

CSS

* {
        padding: 0;
        margin: 0;
    }
    * {
        padding: 0;
        margin: 0;
    }
    ul {
        list-style: none;
    }
    ul li {
        float: left;
        width: 100px;
        text-align: center;
        position: relative;
        /* ensures that the second <ul></ul> displays as a block and not inline */
    }
    ul li a {
        display: block;
        padding: 5px 10px;
        color: #333;
        background: #f2f2f2;
        text-decoration: none;
    }
    ul li a:hover {
        color: #fff;
        background: #939393;
    }
    ul li ul {
        display: none;
    }
    ul li:hover ul {
        display: block;
        /* display the dropdown */
        position: absolute;
        /* makes the second <ul></ul> float on top of the content beneath it*/
    }
    #box {
        background-color: #FF0000;
        width:100%;
        height: 50px;
        float: left;
    }
    ul {
        list-style: none;
    }
    ul li {
        float: left;
        width: 100px;
        text-align: center;
        position: relative;
        /* ensures that the second <ul></ul> displays as a block and not inline */
    }
    ul li a {
        display: block;
        padding: 5px 10px;
        color: #333;
        background: #f2f2f2;
        text-decoration: none;
    }
    ul li a:hover {
        color: #fff;
        background: #939393;
    }
    ul li ul {
        display: none;
    }
    ul li:hover ul {
        display: block;
        /* display the dropdown */
        position: absolute;
        /* makes the second <ul></ul> float on top of the content beneath it*/
    }
    #box {
        background-color: #FF0000;
        width:100%;
        height: 50px;
        float: left;
    }