JSFiddle - React, Tailwind, and code Playground

HTML

<div class="masthead">
    <div class="container">
        <div class="logo">
            <h1><a href="index.htm"> MY SITE</a></h1>

        </div>
        <div class="navigation">
            <ul>
                <li><a href="courses.htm">Courses</a>
                </li>
                <li><a href="institution.htm">Places</a>
                </li>
                <li><a href="about.htm">More</a>

                    <ul>
                        <li><a href="#">Share</a>
                        </li>
                        <li><a href="#"> Help</a>
                        </li>
                    </ul>
                </li>
                <li id="navcontent"><a href="signin.htm"> Sign In </a>
                </li>
                <li><a href="signup.htm">Sign Up</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}
ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
}
ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}
ul li:hover
{
	background:#f6f6f6
}
ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	
}
ul ul li
{
	float:none;
	width:200px
     color: red;
}
ul ul a
{
	line-height:120%;
	padding:10px 15px
}
ul ul ul
{
	top:0;
	left:100%
}
ul li:hover > ul
{
	display:block
}