JSFiddle - React, Tailwind, and code Playground

by Felipe Stoker

HTML

<ul class="topoMenu p-relative">
    <li id="segmentos">	<a href="#">segmentos</a>

        <div class="topoMenuBarra"></div>
        <div class="topoMenuSegmentos p-absolute">
            <div class="topoMenuSegmentosEsq">
                <ul class="margin-top-20">
                    <li id="neomotEngenharia">
                        <div class="topoMenuSegmentoBarra"></div>	<span>BLA BLA</span>

                    </li>
                    <li id="neomotHospitalar">
                        <div class="topoMenuSegmentoBarra"></div>	<span>BLA BLA</span>

                    </li>
                    <li id="neomotIluminacao">
                        <div class="topoMenuSegmentoBarra"></div>	<span>BLA BLA</span>

                    </li>
                    <li id="neomotElevadores">
                        <div class="topoMenuSegmentoBarra"></div>	<span>BLA BLA</span>

                    </li>
                </ul>
            </div>
            <div class="topoMenuSegmentosDir"></div>
        </div>
    </li>
    <li><a class="topoFb" href="http://www.fb.com"></a>

    </li>
</ul>

CSS

.clear {
    margin: 0px !important;
    padding: 0px !important;
    clear: both !important;
    height: 0px !important;
    line-height: 0px !important;
}
.cont960 {
    width: 960px;
    margin:auto;
}
.topoMenu li {
    font: 300 20px/20px'Ubuntu', sans-serif;
    color: #fff;
    float: left;
    margin-right: 20px;
}
.topoMenu li img {
    margin-right: 95px;
    margin-top: 44px
}
.topoMenu li a {
    margin-top: 62px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.topoMenu li a:hover{
	border-bottom: 2px solid #d3d5db;
	padding-bottom: 10px;
}
.topoFb {
    background: url("../imagens/facebook_logo.png") no-repeat;
    width: 115px;
    height: 30px;
    margin-left: 5px;
    margin-top: 54px;
}
.homeBg {
    background: url("../imagens/bgTopo.jpg") no-repeat center;
    width: 100%;
    height: 550px;
    display: block;
    float: left;
}
.topoMenuBarra {
    height: 2px;
    background-color: #ced1d7;
    display: none;
}
/*.topoMenu a:hover {border-bottom: 2px #ced1d7 solid;}*/
 .topoMenuSegmentos {
    width: 470px;
    height: 190px;
    background-color: #0a1737;
}
.topoMenuSegmentosEsq {
    width: 248px;
    float: left;
}
.topoMenuSegmentosEsq li {
    height: 35px;
    float: left;
    width: 248px;
    cursor: pointer;
    border: 1px solid transparent;
}
.topoMenuSegmentosEsq li:hover {
    border: 1px solid #384565;
    margin-left: -6px;
}
.topoMenuSegmentos {
	display: none;
	margin-top: -2px;
}
#segmentos:hover .topoMenuSegmentos {
	display: block;
	/*transition-property: all;
	transition-duration: 0.3s;*/
}
.topoMenuSegmentosEsq li:hover .topoMenuSegmentoBarra {
    width: 6px;
    height: 35px;
    background: #4ea1ac;
    float: left;
}
.topoMenuSegmentosEsq li span {
    font: 300 15px/35px'Ubuntu', sans-serif;
    text-indent: 30px;
    display: inline-block;
}
.topoMenuSegmentosDir {
    width: 220px;
    float: right;
}