JSFiddle - React, Tailwind, and code Playground

by Paulie_D

HTML

<nav class="main-nav">
                    <ul class="dropdown-menu">
                   <li class="tab-gd">
                            <a href="graphic-design.php" title="Diseño Grafico">Diseño Grafico</a>
                        </li><li class="tab-os">
                            <a href="other-services.php" title="Otros Servicios">Otros Servicios</a>
                            <div class="submenu">
                                
                            </div>
                        </li><li class="tab-s">
                            <a href="support.php" title="Soporte Tecnico">Soporte</a>
                        </li>
                    </ul>
                </nav>

CSS

a{
    text-decoration: none;
}

.main-nav{
	width: 600px;
	height: auto;
}

.main-nav > ul{
	padding: 0;
	margin: 0;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
}

.main-nav > ul > li{
	display: inline-block;
	width: 33%;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
    background: #EEE;
}

.main-nav > ul > li > a{
	padding-top: 21px;
	padding-bottom: 21px;
	display: block;
	color: #000;
}

.main-nav > ul > li:hover{
	color: #008293;
    background: #ADADAD;
}

.submenu{
	position: absolute;
	width: 300px;
	height: 100px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #FFF;
	visibility: hidden;
	z-index: 9999;
    border: 1px solid #008293;
}

.main-nav > ul > li:hover > div.submenu{
    visibility: visible;
}