JSFiddle - React, Tailwind, and code Playground

HTML

<div class="startThis clearfix">
<div class="containThis clearfix">
    <ul id="menu" class="rotate4 clearfix">
        <li class="hasDropdown">
            <div><a href="#">This will go on another line</a></div>
                <ul class="clearfix">
                  <li class="hasDropdown">
                      <div><a href="#">Submenu Item 1</a></div>
                          <ul class="clearfix">
                              <li><div><a href="#">Submenu Item 2</a></div></li>
                              <li><div><a href="#">Submenu Item 3</a></div></li>  
                              <li><div><a href="#">Submenu Item 4</a></div></li>
                              <li><div><a href="#">Submenu Item 4</a></div></li>
                          </ul>
                  </li>        
                  <li><div><a href="#">Submenu Item 2</a></div></li>
                  <li><div><a href="#">Submenu Item 3</a></div></li>  
                  <li><div><a href="#">Submenu Item 4</a></div></li>  
                </ul>
            
        </li>
        <li href="#"><div><a>line 2</a></div></li>
        <li href="#"><div><a>line 3</a></div></li>
        <li href="#"><div><a>line 4</a></div></li>        
        <li href="#"><div><a>line 5</a></div></li>
        <li href="#"><div><a>line 6</a></div></li>
        <li href="#"><div><a>line 7</a></div></li>
        <li href="#"><div><a>line 8</a></div></li>
        <li href="#"><div><a>line 9</a></div></li>
        <li href="#"><div><a>line 10</a></div></li>
    </ul>
</div>
</div>

CSS

body {   
    margin:0;padding:0;
}
.startThis {    
    text-align:center;
}
.containThis {    
    margin-top:50px;
    width: 484px;
    overflow: hidden;
    height: 484px;
    position: relative;
    display:inline-block;
    padding-top: 145px;
    background:#e7e7e7;
    background-image: url("http://christophersowerby.com/flower/bg.png");
}
.containThis ul {
    padding:0;
    list-style-type: none;      
    left: 50%;
    width: 484px;
    height: 484px;
}
.containThis > ul {
    position: absolute;
    left: 50%;
    margin-left: -51px;
    width: 484px;
    height: 484px;
}

.containThis ul ul {
position: absolute;
left: -434px;
top: -30px; 
}
a {
    color:#B58D7B;
    text-decoration:none;
}
a:hover {
    color: #00B3FF;
}
li {
   width:80px;height:20px;
    list-style:none
}
li div {
    width:155px;min-height:20px;margin-left:54px;border:1px solid #e0bb00;text-align:center;
    padding:10px 0px 10px 0px;
    color:#FAD406;
    font-size:16px;
    border-radius:45px 5px 45px;
    background-color: #FAD406;
}
.hasDropdown ul {
    -moz-transform:rotate(90deg) !important; 
    -webkit-transform:rotate(90deg) !important; 
    -ms-transform:rotate(90deg) !important; 
    -o-transform:rotate(90deg) !important; 
    transform:rotate(90deg) !important;    
    position: absolute;
}
.rotate4 li:nth-child(1) {
    -moz-transform:rotate(-90deg);    
    -webkit-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg);
    margin-left: 0px;
}
.rotate4 li:nth-child(2){    
    -moz-transform:rotate(-50deg);    
    -webkit-transform:rotate(-50deg);    
    -ms-transform:rotate(-50deg);    
    -o-transform:rotate(-50deg);    
    transform:rotate(-50deg);    
    margin-left: 51px;
margin-top: -7px;
}
.rotate4 li:nth-child(3){
    -moz-transform:rotate(-9deg);    
    -webkit-transform:rotate(-9deg);    
    -ms-transform:rotate(-9deg);    
    -o-transform:rotate(-9deg);    
   ...

JavaScript

// Copyright (c) 2011 Peter Chapman - www.topverses.com
// Freely distributable for commercial or non-commercial use
$(document).ready(function() {
	$('#menu ul').hide();
	$('#menu li div').click(
		function() {
			var openMe = $(this).next();
			var mySiblings = $(this).parent().siblings().find('ul');
			if (openMe.is(':visible')) {
				openMe.slideUp('normal');  
			} else {
				mySiblings.slideUp('normal');  
				openMe.slideDown('normal');
			}
	      }
	);
});