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

/*

.tabs-inner .widget li a,.tabs-inner .widget li:last-child a {border:none;}
*/

.main-outer {background: #fff;
    top: 45px;
}
header {
    background: #fff !important;
}
#cssmenu {
    float: left;
    height: 40px !important;
}
#cssmenu:hover {
    float: left;
    height: 300px !important;
}
.tabs-outer {
    width: 100%;
    z-index: 99999999999999;
    position: absolute;border-bottom:1px solid #fff;}

.content-outer,
.content-fauxcolumn-outer,
.region-inner {
    min-width: 960px;
    max-width: 1200px;
}
#Attribution1 {
    display: none
}
.tabs-outer {
    background: #111
}

.tabs-outer:hover {
    background: rgba(0, 0, 0, .8);
}
.tabs-cap-top,
.tabs-cap-bottom {
    border: none
}
#cssmenu ul {
    margin: 0;
    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: 50px;
    /* 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: rgba(0, 0, 0,0);
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
    vertical-align: middle;
}
#cssmenu > ul {
    text-align: center;padding:0px 0px 0px 0px ;
    
}

/* Main menu items */
#cssmenu > ul > li {
    display: inline-block;
    margin-left: 15px;padding:5px 0px 0px 0px ;
    /* This is when the drop down box appears */
    
    position: relative;
}
/************** MAIN TEXT ************/

#cssmenu > ul > li > a {
    color: #fff;
    font-family: Verdana, 'Lucida Grande';
    font-size: 15px;
    line-height: 30px;
    /* 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;
   ...