JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div>
<ul>
    <li><a href="#home">Home</a>
        <ul>
            <li><a href="#home">inHome</a></li>
            <li><a href="#news">inNews</a></li>
            <li><a href="#contact">inContact</a></li>
            <li><a href="#about">inAbout</a></li>
        </ul>
    </li>
    <li><a href="#news">News</a>
        <ul>
            <li><a href="#home">inHome</a></li>
            <li><a href="#news">inNews</a></li>
            <li><a href="#contact">inContact</a></li>
            <li><a href="#about">inAbout</a></li>
        </ul>
    </li>
    <li><a href="#contact">Contact</a>
        <ul>
            <li><a href="#home">inHome</a></li>
            <li><a href="#news">inNews</a></li>
            <li><a href="#contact">inContact</a></li>
            <li><a href="#about">inAbout</a></li>
        </ul>
    </li>
    <li><a href="#about">About</a>
        <ul>
            <li><a href="#home">inHome</a></li>
            <li><a href="#news">inNews</a></li>
            <li><a href="#contact">inContact</a></li>
            <li><a href="#about">inAbout</a></li>
        </ul>
    </li>
</ul>

</div>

CSS

*
{
list-style-type:none;
margin:0;
padding:0;
}
div {
position:relative;
top:-17px;   
}
ul li
{
float:left;
display:inline;
}
ul li ul li
{
float:none;
display:block;
}

JavaScript

// nav styling