JSFiddle - React, Tailwind, and code Playground

by Alexandre lopes

HTML

<nav id="main-nav">
				<ul id="menu" class="clearfix">
					<li <?php if($verifica['index']==true) echo "class='active'" ?>>
						<a href="index.php">Início</a>
					</li>
					<li <?php if($verifica['produtos']==true) echo "class='active'" ?>>
						<a href="#">Produtos</a>
						<ul>
							<li class="menu-especial">
								<a  href="#hospedagem">Registro de Domínios<span>></span>
                            	<ul style="display: none; top: -2px; width: 210px;">
                                <li style="height: 208px;" class="menu-grande">
                                <div class="icones-menu icone-www"></div>
                                <span>Registro de Domínios</span>
                                <p>O primeiro passo para ter seu site online.</p>
                                </li>
                            	</ul></a>
                            </li>
							<li <?php if($verifica['hospedagem-de-sites']==true) echo "class='ativo'" ?>>
								<a  href="#hospedagem">Hospedagem de Sites<span>></span>
                            	<ul style="display: none; top: -44px; width: 210px;">
                                <li style="height: 208px;" class="menu-grande">
                                <div class="icones-menu icone-paginaa"></div>
                                <span>Hospedagem de Sites</span>
                                <p>Ambiente veloz, seguro e cheio de recursos.</p>
                                </li>
                            	</ul></a>
                            </li>
                            <li class="menu-especial">
								<a  href="#revenda">Revenda de Hospedagem<span>></span>
                            	<ul style="display: none; top: -86px; width: 210px;">
                                <li style="height: 208px;" class="menu-grande">
                                <div class="icones-menu icone-revenda"></div>
                                <span>Revenda de Hospedagem</span>
                                <p>A...

JavaScript

jQuery("#menu > li").hover(function() {
        jQuery(this).find("ul").first().slideDown(600);
    }, function() {
        jQuery(this).find("ul").first().slideUp(200);
		
    });
	
    jQuery("#menu li ul li").hover(function() {
        jQuery(this).find("ul").first().toggle(0);
	
    });
	
    jQuery("#menu li ul li").each(function() {
        if(jQuery(this).has("ul").length > 0) {
            jQuery(this).addClass("menu-arrow")
        }
    });