JSFiddle - React, Tailwind, and code Playground

by liammccann1992

HTML

<body>
    <ul class="menu">
        <li class="menuItem"><a href="#">Home</a>

        </li>
        <li class="menuItem"><a href="#">About</a>

            <ul>
                <li>Name Middle Name</li>
                <li>Name</li>
                <li>Name Middle and Last</li>
            </ul>
        </li>
        <li class="menuItem"><a href="#">Events</a>

        </li>
        <li class="menuItem"><a href="#">text</a>

        </li>
        <li class="menuItem"><a href="#">text</a>

        </li>
    </ul>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    position:relative;
}
.menu, .menu li {
    list-style-type: none;
}
.menu {
    display: inline-block;
}
.menu li {
    float: left;
    display: block;
}
.menu a {
    float: left;
    width: 100%;
    padding-top: 7px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-left: 20px;
    color: white;
    background: #404438;
}
.menu ul {
    display: none;
    width: 100%;
    background-color: #9E9C86;
        position: absolute;
z-index: 1000;
top: 35px;
}
.menu ul li {
    float: left;
    display: block;
    clear: both;

      padding-top: 7px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-left: 20px;
    background: rgba(242, 6, 6, 0.6);
}
.menu ul li:first-child {
    margin: 4px 0 0 0;
}
.menu li:hover ul {
    display: block;
}
}

JavaScript

//http://econekt.co.uk/about.aspx