JSFiddle - React, Tailwind, and code Playground
HTML
<div id="secondaryTopBarContainer">
<div id="secondaryTopMenuContainer">
<ul id="secondaryTopMenu">
<li>
<a>Mercados</a>
<ul>
<li><a href="#">Portugal</a></li>
<li><a href="#">Angola</a></li>
<li><a href="#">Moçambique</a></li>
<li><a href="#">Cabo Verde</a></li>
<li><a href="#">São Tomé e Príncipe</a></li>
<li><a href="#">Timor Leste</a></li>
<li><a href="#">Malta</a></li>
</ul>
</li>
<li><a>Industrias</a></li>
<li><a>Serviços Profissionais</a></li>
<li>
<a>Software</a>
<ul>
<li><a href="#">Promosoft Financial Suite</a></li>
<li>
<a href="#" class="drop">Channels</a>
<ul>
<li><a href="#">aBanka</a></li>
<li><a href="#">bBanka</a></li>
<li><a href="#">cBanka</a></li>
<li><a href="#">dBanka</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Alianças</a></li>
</ul>
</div>
<div id="customerLogin"><a href="#">[Login Utilizador]</a></div>
</div>
CSS
body {
font-family: Calibri;
font-size: 12px;
}
#secondaryTopBarContainer
{
height: 30px;
line-height: 30px;
background-color:#ffffff;
}
#secondaryTopBarContainer a
{
text-transform: uppercase;
}
#secondaryTopMenuContainer
{
cursor: pointer;
}
#secondaryTopMenuContainer li
{
position: relative;
}
#secondaryTopMenu li a
{
display: block;
color: #333;
height: 30px;
padding: 0 16px;
line-height: 30px;
}
#secondaryTopMenuContainer > ul > li > a {
margin: -5px 0 5px;
}
#secondaryTopMenuContainer ul ul a.drop
{
background: #A7C9CA url(../images/exictosLayout/seta.gif) no-repeat 160px center;
}
#secondaryTopMenuContainer ul ul a.drop:hover
{
background: #769494 url(../images/exictosLayout/seta_activa.gif) no-repeat 160px center;
}
#secondaryTopMenuContainer ul ul :hover > a.drop
{
background: #769494 url(../images/exictosLayout/seta_activa.gif) no-repeat 160px center;
}
#secondaryTopMenuContainer ul ul ul a
{
background: #A7C9CA;
}
#secondaryTopMenuContainer ul ul ul a:hover
{
background: #769494;
}
#secondaryTopMenuContainer ul ul
{
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 170px;
padding: 1px 0 0 0;
}
#secondaryTopMenuContainer ul ul ul
{
left: 181px;
top: -1px;
width: 170px;
}
#secondaryTopMenuContainer ul ul a
{
background: #A7C9CA;
padding: 0px 16px;
width: 148px;
margin: 0 0 1px 0;
}
#secondaryTopMenuContainer :hover > a,
#secondaryTopMenuContainer ul ul :hover > a
{
color: #FFF;
background: #A7C9CA;
}
#secondaryTopMenuContainer ul ul a:hover
{
color: #FFF;
background: #769494;
}
#secondaryTopMenuContainer ul li:hover ul,
#secondaryTopMenuContainer ul a:hover ul
{
visibility: visible;
}
#secondaryTopMenuContainer ul :hover ul ul
{
visibility: hidden;
}
#secondaryTopMenuContainer ul :hover ul :hover ul
{
visibility: visible;
}
#secondaryTopMenuContainer > ul > li
{
...
JavaScript
dojo.require("dojo.NodeList-traverse");
dojo.query("#secondaryTopMenuContainer > ul > li").connect("onmouseenter", function(evt) {
dojo.style(evt.currentTarget, "borderLeft", "1px solid #ffffff");
}).connect("onmouseleave", function(evt) {
dojo.style(evt.currentTarget, "borderLeft", "1px solid #999999");
});