JSFiddle - React, Tailwind, and code Playground

HTML

<div id='cssmenu'>

<ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   

	<li class='has-sub'><a href='#'><span>About Us</span></a>

	<ul>

		<li class='has-sub'><a href='history.html'><span>History Of Elvyn</span></a></li>

		<li class='has-sub'><a href='lifeinelvyn.html'><span>Life In Elvyn</span></a></li>

		<li class='has-sub'><a href='committee.html'><span>Our Committee</span></a></li>

        <li class='has-sub'><a href='warden.html'><span>The Warden Team</span></a></li>

        <li class='has-sub'><a href='http://www.lboro.ac.uk/services/campus-living/food-drink/halldiningfooddiaries/cateredhallmenu/' target="_blank"><span>Catered Menu</span></a></li>

        <ul>

		</ul>

		</ul>

	<li><a href='events.html'><span>Events</span></a></li>

    

    <li class='has-sub'><a href='#'><span>Media</span></a>

	<ul>

		<li class='has-sub'><a href='mediaaboutus.html'><span>About Us</span></a></li>

        <li class='has-sub'><a href='mediasubcommittee.html'><span>Sub-Committee</span></a></li>

        <li class='has-sub'><a href='https://www.facebook.com/ElvynRichardsMedia#' target="_blank"><span>Elvyn Images</span></a></li>

		<li class='has-sub'><a href='http://www.youtube.com/channel/UCyKYhzsknhggkykoZR9KC-g/videos?flow=grid&view=0' target="_blank"><span>Elvyn TV</span></a></li>

        <li class='has-sub'><a href='elvynapp.html'><span>Elvyn App</span></a></li>

        <ul>

		</ul>

		</ul>

CSS

#cssmenu {text-align:center;}

#cssmenu ul { margin: 0 auto ;display:inline-block; padding: 0;}

#cssmenu li { margin: 0; padding: 0;}

#cssmenu a { margin: 0; padding: 0;}

#cssmenu ul {list-style: none;}

#cssmenu a {text-decoration: none;}



#cssmenu {

	height: 70px;			/* This is for the main menu bit at the top */

	width: 100%;			/* This means on every screen no matter the size, the width will cover the top  */

	line-height: normal;

	text-align: center;

	background-color: rgb(35,35,35); 

	box-shadow: 0px 2px 3px rgba(0,0,0,.4);
	
	vertical-align: middle;

}



#cssmenu > ul > li {

    float: left;

    margin-left: 15px;       /* This is when the drop down box appears */

    position: relative;

}



#cssmenu > ul > li > a {

    color: rgb(160,160,160);

    font-family: Verdana, 'Lucida Grande';

    font-size: 14px;

    line-height: 70px;		/* This bit chances the size of the text on the main heading */

    padding: 15px 24px;		/* This is the padding between the different titles */

	

-webkit-transition: color .15s;

   -moz-transition: color .15s;

     -o-transition: color .15s;

        transition: color .15s;

}



#cssmenu > ul > li > a:hover {color: rgb(250,250,250); }

#cssmenu > ul > li > ul {

    opacity: 0;

    visibility: hidden;

    padding: 16px 0 20px 0;

    background-color: rgb(250,250,250);

    text-align: left;  /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */

    position: absolute;

    top: 55px;			/* This is for the drop down annimation */

    left: 50%;

    margin-left: -90px;

    width: 180px;

-webkit-transition: all .3s .1s;

   -moz-transition: all .3s .1s;

     -o-transition: all .3s .1s;

        transition: all .3s .1s;

-webkit-border-radius: 5px;

   -moz-border-radius: 5px;

        border-radius: 5px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);

   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);

        box-shadow: 0px 1px...