JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>


<ul id="nav">
<li class="site-name"><a href="#">&nbsp;</a></li>
    <li class="yahoo"><a href="#">Yahoo</a>
        <ul>
        <li><a href="#">Yahoo Games &raquo;</a>            
            <ul>
                <li><a href="#">Board Games</a></li>
                <li><a href="#">Card Games</a></li>
                <li><a href="#">Puzzle Games</a></li>
                <li><a href="#">Skill Games &raquo;</a>
                <ul>
                    <li><a href="#">Yahoo Pool</a></li>
                    <li><a href="#">Chess</a></li>
                </ul>
                </li>
            </ul>
		</li>
        <li><a href="#">Yahoo Search</a></li>
        <li><a href="#">Yahoo Answsers</a></li>
        </ul>
    </li> 
    <li class="facebook"><a href="#">Facebook</a>
        <ul>
        <li><a href="#">Facebook Pages</a></li>
        <li><a href="#">Facebook Groups</a></li>
        </ul>
    </li>
    <li class="google"><a href="#">Google</a>
        <ul>
        <li><a href="#">Google mail</a></li>
        <li><a href="#">Google Plus</a></li>
        <li><a href="#">Google Search &raquo;</a>
            <ul>
                <li><a href="#">Search Images</a></li>
                <li><a href="#">Search Web</a></li>
            </ul>
        </li> 
        </ul>
    </li>
    <li class="twitter"><a href="#">Twitter</a>
            <ul>
                <li><a href="#">New Tweets</a></li>
                <li><a href="#">Compose a Tweet</a></li>
            </ul>
    </li>
</ul>

CSS

#nav{
	height: 39px;
	font: 12px Geneva, Arial, Helvetica, sans-serif;
	background: #905db9;
	border: 1px solid #905db9;	
	border-radius: 3px;
	min-width:500px;
	margin-left: 0px;
	padding-left: 0px;
}	

#nav li{
	list-style: none;
	display: block;
	float: left;
	height: 40px;
	position: relative;
	border-right: 1px solid #905db9;
}

#nav li a{
	padding: 0px 10px 0px 30px;
	margin: 0px 0;
	line-height: 40px;
	text-decoration: none;
	border-right: 1px solid #905db9;
	height: 40px;
	color: #FFF;
	text-shadow: 1px 1px 1px #66696B;
}

#nav ul{
	background: #f2f5f6; 
	padding: 0px;
	border-bottom: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-left:1px solid #DDDDDD;
	border-radius: 0px 0px 3px 3px;
	box-shadow: 2px 2px 3px #ECECEC;
	-webkit-box-shadow: 2px 2px 3px #ECECEC;
    -moz-box-shadow:2px 2px 3px #ECECEC;
	width:170px;
}
#nav .site-name,#nav .site-name:hover{
	padding-left: 10px;
	padding-right: 10px;
	color: #FFF;
	text-shadow: 1px 1px 1px #66696B;
	font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
	background: url(images/saaraan.png) no-repeat 10px 5px;
	width: 160px;
	border-right: 1px solid #905db9;
}
#nav .site-name a{
	width: 129px;
	overflow:hidden;
}
#nav li.facebook{
	background: url(images/facebook.png) no-repeat 9px 12px;
}
#nav li.facebook:hover  {
	background: url(images/facebook.png) no-repeat 9px 12px #3BA39B;
}
#nav li.yahoo{
	background: url(images/yahoo.png) no-repeat 9px 12px;
}
#nav li.yahoo:hover  {
	background: url(images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
#nav li.google{
	background: url(images/google.png) no-repeat 9px 12px;
}
#nav li.google:hover  {
	background: url(images/google.png) no-repeat 9px 12px #3BA39B;
}
#nav li.twitter{
	background: url(images/twitter.png) no-repeat 9px 12px;
}
#nav li.twitter:hover  {
	background: url(images/twitter.png) no-repeat 9px 12px #3BA39B;
}

#nav li:hover{
	background: #3BA39B;
}
#nav li a{
	display: block;
}
#nav ul li {
	border-right:none;
	border-bottom:1px...

JavaScript

$(document).ready(function(){
	$("#nav li").hover(
	function(){
		$(this).children('ul').hide();
		$(this).children('ul').slideDown('fast');
	},
	function () {
		$('ul', this).slideUp('fast');            
	});
});

(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var...