JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.spiritlevel.co.uk/fpatest/css/superfish.css">
<link rel="stylesheet" href="http://www.spiritlevel.co.uk/fpatest/css/superfish-vertical.css">
<script src="http://www.spiritlevel.co.uk/fpatest/js/superfish.js"></script>
<div id="homenav">

<ul id="nav" class="sf-menu sf-vertical">

<li id="company"><a href="*">COMPANY</a>
 <ul id="companymenu">
<li id="profilelink"><a href="*">Profile</a></li>
<li id="activitylink"><a href="*">Activity</a></li>
<li id="strategylink"><a href="*">Strategy</a></li>
<li id="teamlink"><a href="*">Team</a></li>
    <li id="financelink"><a href="*">Finance &amp; Governance</a></li>
 </ul>
</li>

<li id="development"><a href="*">DEVELOPMENT</a>
  <ul id="developmentmenu">
<li id="partnerslink"><a href="*">Development Partners</a></li>
<li id="sociallink"><a href="*">Social Responsibility</a></li>
  </ul>
</li>

  <li id="projects"><a href="*">PROJECTS</a></li>
  <li id="contact"><a href="*">CONTACT US</a></li>

 </ul>
</div><!--end homenav -->

JavaScript

$("ul.sf-menu").superfish({
    animation: {
        opacity: 'show',
        height: 'show'
    },
    // slide-down effect without fade-in 
    delay: 600,
    // 1.2 second delay on mouseout 
    speed: 'fast',
    dropShadows: false // completely disable drop shadows by setting this to false 
});