JSFiddle - React, Tailwind, and code Playground

HTML

<div class="megamenu_container">
                    <ul class="megamenu megamenu_slide">       
                        <li class="top_level"><span><a href="#">Main Page</a></span>        
                            <ul class="megamenu_main">
                            	<li><a href="#">Suspendisse</a></li>
                                <li><a href="#">Fusce porta</a></li>
                                <li class="parent"><a href="http://www.mysite.co.uk/mainpage/page-01">Page Level 01</a>
                                    <ul class='children'>
                                        <li><a href="#">Donec et enim</a></li>
                                        <li><a href="#">Aliquam volutpat</a></li>
                                        <li class="parent"><a href="#">Page Level 02</a>
                                            <ul class='children'>
                                                <li class="parent"><a href="#">Page Level 03</a>
                                                    <ul class='children'>
                                                        <li><a href="#">Page Level 04</a></li>
                                                        <li><a href="#">Proin sed nisi a sapien</a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="#">Curabitur ultricies</a></li>
                                            </ul>
                                    	</li>
                                        <li><a href="#">Nunc sit amet</a></li>
                                        <li class="parent"><a href="#">In aliquam orci</a>
                                        	<ul class='children'>
                                                <li class="parent"><a href="#">Page Level 03 V2</a>
                                                    <ul class='children'>
                                               ...

CSS

.megamenu_container { height:55px; line-height:55px; margin:0; position:relative; float:left; z-index:9; background:#d55c4b; margin:0 17px 0 0; padding:0 39px; text-align:left; }
		.megamenu_container a { text-decoration: none; }
		.megamenu_main { list-style:none; padding:0; margin:0; }
		.megamenu li.top_level { list-style:none; background:none; }
		.megamenu .top_level > span { color:#FFF; line-height:55px; outline:0; text-decoration:none; }
		.megamenu .top_level > span a { color:#FFF; }
		.megamenu_main, .megamenu_main ul { position:absolute; top:-9999em; left:-9999em; width:167px; margin:0 0 40px -1px; padding:0; -webkit-box-shadow: 0 2px 5px #bbb; -moz-box-shadow: 0 2px 5px #bbb;  -o-box-shadow: 0 2px 5px #bbb; box-shadow: 0 2px 5px #bbb; border:none; border-top:5px solid #d04734; background:#FFF; display:none; }
		.megamenu > li:hover .megamenu_main { top:55px; left:1px; display:block; }		
		.megamenu > li .megamenu_main_over { top:55px; left:1px; display: block; }		
		.megamenu_main li:hover > ul { top:-5px; left:100%; display:block; }		
		.megamenu_main ul.children_over, .megamenu_main li.addmenu ul.children { top:-5px; left:100%; display:block; }		
		.megamenu_main li:hover > .left_dropdown { left:-100%; }
		.megamenu_slide { top:30px; -webkit-transition: top 0.3s 0.2s, opacity 0 0.2s; -moz-transition: top 0.3s 0.2s, opacity 0 0.2s;	-o-transition: top 0.3s 0.2s, opacity 0 0.2s; -ms-transition: top 0.3s 0.2s, opacity 0 0.2s; transition: top 0.3s 0.2s, opacity 0 0.2s; }
		.megamenu_slide ul { left:80%; -webkit-transition: left 0.2s 0.2s, opacity 0 0.2s; -moz-transition: left 0.2s 0.2s, opacity 0 0.2s; -o-transition: left 0.2s 0.2s, opacity 0 0.2s; -ms-transition: left 0.2s 0.2s, opacity 0 0.2s; transition: left 0.2s 0.2s, opacity 0 0.2s; }
		.megamenu_slide li > .left_dropdown { left:-80%; }
		.parent, .megamenu_main .dropdown_arrow { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); background-repeat: no-repeat;...

JavaScript

$('.top_level').mouseover(function(){
		$('.megamenu_main').addClass('megamenu_main_over');
		$('html').click(function() {		
			$('.megamenu li.top_level ul').removeClass('megamenu_main_over');
		});
	});  
	
	$('li.parent').mouseover(function(){
		$('ul').removeClass('children_over')
		$(this).children('ul').addClass('children_over');
		$('html').click(function() {		
			$('ul').removeClass('children_over');
		});
	});