JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<p>Hoverable multi menu</p>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="sub-link-bar"> </div>

 <div id="wrap">

 <div class="roundfg">
 <ul id="main-nav">
     <li><a class="main-link" href="#">Home</a>
         <ul class="sub-links">
         <li><a class="main-link" href="#">Home</a></li>
         </ul>
     </li>
     <li><a class="main-link" href="#">Tutorials</a>
         <ul class="sub-links">
             <li><a href="#" >Design</a> </li>
             <li><a href="#">HTML &amp; CSS</a> </li>
             <li><a href="#" >Other</a> </li>
             <li><a href="#">PHP</a> </li>
             <li><a href="#">Ruby</a> </li>
             <li><a href="#">Site Builds</a> </li>
             <li><a href="#">Tools &amp; Tips</a> </li>
             <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
         </ul>
 </li>


 <li><a class="main-link" href="#">Videos</a>
 <ul class="sub-links">
 <li><a href="#">Screencasts</a> </li>
 </ul>
 </li>
 <li><a class="main-link" href="#">About</a>
 <ul class="sub-links">

 </ul>
 </li> 
 </ul>
</div>

CSS

#main-nav{
    width:150px;
    
}
body{
    height:1000px;
    
}

JavaScript

$(function() {
    $( "#main-nav" ).menu();
  });

window.onscroll = function (event) { 
  $( "#main-nav" ).menu( "collapseAll", null,true );
}