JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<div class="nav">
 <div class="img-menu"><img src="img/icn-menu.png"/></div>
    <div class="menu">
        <ul>
            <li><a href="Index.html">Home</a>
            </li>
                <li> <a href="#">Games</a>
                <ul>
                    <li><a href="#">Gameplays</a>
                    </li>
                    <li><a href="#">Reviews</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                    <li><a href="#">Trailers</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Downloads</a>
                <ul>
                    <li><a href="#">Games</a>
                    </li>
                    <li><a href="#">Editor de Imagens</a>
                    </li>
                    <li><a href="#">Editor de Áudio e Vídeo</a>
                    </li>
                    <li><a href="#">Segurança</a>
                    </li>
                    <li><a href="#">Sistemas Oprecionais</a>
                    </li>
                    <li><a href="#">Os Mais Baixados</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Mobile</a>
                <ul>
                    <li><a href="#">Android</a>
                    </li>
                    <li><a href="#">IOS</a>
                    </li>
                    <li><a href="#">Windows Phone</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
             <li> <a href="#">Internet</a>
                <ul>
                    <li><a href="#">Redes Socias</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
                    <li> <a href="#">Diversão</a>
                <ul>
                    <li><a href="#">Filmes</a>
                    </li>
                    <li><a...

CSS

.nav{
    width:100%;
    height:42px;
	background-color:#4682B4;    
	font-family:arial;
	font-size:1.000em;
	color:#fff;
    float:left;
}

.menu{
	margin: 0 auto;
    width: 88%;
	margin-left:11.23046875%;
    text-align: left;
}

.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:relative;
    min-width: 200px;
	z-index:99;
}

.nav ul li{
    display: inline-block;
}

.nav ul li:hover{
    background-color: #000;
}

.nav ul li a, visited{
    color: #fff;
    display: block;
    padding: 0.813em;
    text-decoration: none;
}

.nav ul li:hover ul{
    display: block;
}

.nav ul ul {
    display:none;
    position:absolute;
	background-color: #222;
}

.nav ul ul li {
    display: block;
}

.nav ul ul li a:hover{
    color: #fff;
}

.img-menu{
	display:none;	
}

/*-----------Config. da caixa de pesquisa------------*/

.search{
	width:130px;
	height:33px;
	top:-2px;
	right:-2px;
	outline:none;
	border:none;
	background:#222;
	color:#FFF;
	position:relative;	
	font-size:16px;
}

.btn-busca{
	width:33px;
	height:35px;
	outline:none;
	border:none;
	background:#FF7F00;
	cursor:pointer;
	top:2px;
	left:-4px;
	position:relative;
}
li.right { float:right; }