JSFiddle - React, Tailwind, and code Playground

by Jefferson Alison Alves

HTML

<div class="pad1"></div>
<ul id="menu">
	<li><a href="../index.html">home</a></li>
    <li class="sub"><a>curau</a>
		<ul>
            <li><a href="quemsomos.html">quem somos</a></li>
            <li><a href="clipping.html">clipping</a></li>
        </ul>
    </li>
	<li class="sub"><a>portfólio</a>
		<ul>
			<li><a href="idvisual.html">id visual</a></li>
			<li><a href="estamparia.html">estamparia</a></li>
			<li><a href="campanha.html">campanhas</a></li>
			<li><a href="outrosestudos.html">outros estudos</a></li>
            <li><a href="outrostrabalhos.html">outros trabalhos</a></li>
            <li><a href="inspiracoes.html">inspirações 2014</a></li>
		</ul>
	</li>
    <li class="sub"><a>coleções</a>
		<ul>
            <li><a href="venda.html">à venda</a></li>
        </ul>
    </li>
	<li class="sub"><a href="contato.html">contato</a></li>
</ul>
<div class="pad2"></div>

CSS

.pad1 {width:50px; height:20px; background:#000; display:inline; float:right; margin:3px 3px 0 3px;}
.pad2 {width:50px; height:20px; background:#000; display:inline; float:right; margin:3px 3px 0 0;}

#menu {list-style-type:none; padding:0; margin:0; float:right;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#000; margin:3px 3px 0 0; position:relative;}
#menu li.sub {background:#000;}

/* for IE5.5 and IE6 only */
#menu table {border-collapse:collapse;position:absolute;top:0;left:0;z-index:80;font-size:1em;}

#menu li a {display:block; color:#ee0; height:25px; font-family: 'Maven Pro', sans-serif;, cursive; font-size:18px; line-height:24px; width:140px; text-decoration:none; text-align:center;}
#menu :hover,
#menu :focus, {color:#ee0; background:#000;}
#menu :hover > a,
#menu :focus > a {color:#ee0; background:#000;}

#menu ul, 
#menu :hover ul ul,
#menu :focus ul ul,
#menu :hover ul :hover ul ul,
#menu :focus ul :focus ul ul,
#menu :hover ul :hover ul ul.left,
#menu :focus ul :focus ul ul.left {position:absolute; left:-9999px; width:140px;}

#menu :hover ul,
#menu :focus ul{left:0;top:25px; background:url(transparent.gif);} /* the background image is for IE7 */

#menu :hover ul :hover ul,
#menu :focus ul :focus ul,
#menu :hover ul :hover ul :hover ul,
#menu :focus ul :focus ul :focus ul {padding:0 3px; left:125px; top:-3px;}

#menu :hover ul :hover ul.left,
#menu :focus ul :focus ul.left,
#menu :hover ul :hover ul :hover ul.left,
#menu :focus ul focus ul :focus ul.left {padding:0 3px; left:-131px; top:-3px;}

JavaScript

$(function () {
    $(".sub").on('hover click', function () {
        $('#menu ul, #menu *:hover ul ul, #menu *:focus ul ul, #menu *:hover ul *:hover ul ul, #menu *:focus ul *:focus ul ul, #menu *:hover ul *:hover ul ul.left, #menu *:focus ul *:focus ul ul.left').css({
            left: "0px"
    });
});