JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav">
  <ul>
    <li><a tabindex="1" href="#">Curriculum</a>
      <ul>
        <li><a tabindex="2" href="URLTOPAGE">Art</a></li>   
        <li><a tabindex="3" href="URLTOPAGE">GCSE Media Studies</a></li>   
        <li><a tabindex="4" href="URLTOPAGE">Humanities &amp; Social Sciences</a></li>     
      </ul>
    </li>
    <li><a tabindex="5" href="#">Information</a>
      <ul>
        <li><a tabindex="6" href="URLTOPAGE">Information Home</a></li>
        <li><a tabindex="7" href="URLTOPAGE">Admissions</a></li>
        <li><a tabindex="8" href="URLTOPAGE">Behaviour For Learning</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

body { font-family: sans-serif; font-size: 12pt; color: #444; line-height: 1.5em; }
			h1 { font-size: 1.5em; }
			#wrapper { max-width: 600px; margin: 0 auto; text-align: center; }
			#main-nav ul { list-style: none; margin: 0; padding: 0; }
			#main-nav ul li { display: inline-block; margin: 0 1em 0 1em; padding: 0.35em 0.75em 0.35em 0.75em; border-radius: 0.5em; }
			#main-nav ul li.active { background: #999; }
			#main-nav ul li.active a { color: #fff; text-decoration: none; }

			/* A single menu */
			.dropotron { background: #444; border-radius: 0.5em; list-style: none; margin: 0; min-width: 10em; padding: 0.75em 1em 0.75em 1em; }
			.dropotron > li { border-top: solid 1px #555; margin: 0; padding: 0; }
			.dropotron > li:first-child { border-top: 0; }
			.dropotron > li > a { color: #ccc; display: block; padding: 0.5em 0 0.5em 0; text-decoration: none; }
			.dropotron > li.active > a, .dropotron > li:hover > a { color: #fff; }

			/* Only applies to top level ("level-0") menus */
			.dropotron.level-0 { margin-top: 1.25em; }
			.dropotron.level-0:before { content: ''; position: absolute; border-bottom: solid 0.5em #444; border-left: solid 0.5em transparent; border-right: solid 0.5em transparent; top: -0.5em; }

JavaScript

/* jquery.dropotron.js v1.4.3 | (c) n33 | n33.co | MIT licensed */
(function(e){var t="openerActiveClass",n="click touchend",r="left",i="doCollapseAll",s="position",o="trigger",u="disableSelection_dropotron",a="addClass",f="doCollapse",l=!1,c="outerWidth",h="removeClass",p="preventDefault",d="length",v="dropotron",m="clearTimeout",g="right",y="parent",b=!0,w="speed",E="none",S="stopPropagation",x="doExpand",T=":visible",N="absolute",C="css",k="center",L="toggle",A="baseZIndex",O="offsetX",M="alignment",_="submenuClassPrefix",D="children",P="hover",H="relative",B="doToggle",j="ul",F="z-index",I="opacity",q="find",R="opener",U="px",z=null,W="hide",X="offset",V="detach",$="fast";e.fn[u]=function(){return e(this)[C]("user-select",E)[C]("-khtml-user-select",E)[C]("-moz-user-select",E)[C]("-o-user-select",E)[C]("-webkit-user-select",E)},e.fn[v]=function(t){var n;if(this[d]==0)return e(this);if(this[d]>1)for(n=0;n<this[d];n++)e(this[n])[v](t);return e[v](e.extend({selectorParent:e(this)},t))},e[v]=function(E){var et=e.extend({selectorParent:z,baseZIndex:1e3,menuClass:v,expandMode:P,hoverDelay:150,hideDelay:250,openerClass:R,openerActiveClass:"active",submenuClassPrefix:"level-",mode:"fade",speed:$,easing:"swing",alignment:r,offsetX:0,offsetY:0,globalOffsetY:0,IEOffsetX:0,IEOffsetY:0,noOpenerFade:b,detach:b,cloneOnDetach:b},E),tt=et.selectorParent,nt=tt[q](j),rt=e("body"),it=e("body,html"),st=e(window),ot=l,ut=z,at=z;tt.on(i,function(){nt[o](f)}),nt.each(function(){var i=e(this),d=i[y]();et.hideDelay>0&&i.add(d).on("mouseleave",function(){window[m](at),at=window.setTimeout(function(){i[o](f)},et.hideDelay)}),i[u]()[W]()[a](et.menuClass)[C](s,N).on("mouseenter",function(){window[m](at)}).on(x,function(){var n,u,p,v,E,S,x,_,D,P,B;if(i.is(T))return l;window[m](at),nt.each(function(){var...