JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="selected">Interiors</a>
        <ul>
            <li><a href="#">Project 1</a></li>
            <li><a href="#" class="selected">Project 2</a></li>
            <li><a href="#">Project 3</a></li>
            <li><a href="#">Project 4</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Details</a>
    <li><a href="#">Studio</a>
    <ul>
        <li><a href="#">Joe Bloggs</a></li>
        <li><a href="#">Joe Bloggs2</a></li>
        <li><a href="#">Joe Bloggs3</a></li>
        <li><a href="#">Joe Bloggs4</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

.clear {clear:both} 
/* remove the list style */
#nav {
    margin:0; 
    padding:0;
    padding-top:40px;
    list-style:none;
}   
     
    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
        width:100px; 
        position:relative;
        z-index:500; 
        margin:0 1px;
    }
         
    /* this is the parent menu */
    #nav li a {
        display:block; 
        padding:0px 5px 0 5px;
        font-size: 12px;
        line-height: 110%;
        text-decoration:none; 
        color:#ccc; 
        text-align:left; 
    }
 
    #nav li a:hover {
        color:#fff;
    }
     
    /* you can make a different style for default selected value */
    #nav a.selected {
        color:#f00;
    }
     
        /* submenu, it's hidden by default */
        #nav ul {
            float:left;
            position:absolute;
            top: 0px;
            left:100px; 
            display:none; 
            margin:0 0 0 -1px; 
            padding:0; 
            list-style:none;
            text-align:center;
        }
         
        #nav ul li {
            width:400px; 
            float:right; 
        }
         
        /* display block will make the link fill the whole area of LI */
        #nav ul a {
            display:block;  
            padding: 0px 5px; 
            color:#666;
        }
         
        #nav ul a:hover {
            text-decoration:underline;  
        }
         
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
    margin:0 0 0 -2px;
}

JavaScript

$(document).ready(function () {    
    
    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).stop().slideDown(100);

        }, 
        function () {
            //hide its submenu
            $('ul', this).stop().slideUp(100);            
        }
    );
    
});

$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade',
        speed: 4000,
        timeout: 1000  // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});