Hover do menu continue selecionada enquanto navego pelo submenu
Olá, sou novo tanto no fórum quanto no desenvolvimento de sites e estou com uma dúvida que talvez seja simples de solucionar.
Preciso fazer com que o hover do menu permaneça selecionado enquanto o mouse está na ul do submenu.
Segue o código:
<nav>
<ul class="menu">
<li class="active"><a class="active" href="#">EMPRESA</a>
<ul class="submenu">
<li><a class="selection" href="#">RESUMO</a></li>
<li><a href="#">VENDAS</a></li>
<li><a href="#">COMPRAS</a></li>
<li><a href="#">ORÇAMENTO</a></li>
<li><a href="#">RELATÓRIOS</a></li>
</ul>
</li>
</ul>
</nav>
css:
.menu{
margin: 0;
padding: 0;
list-style: none;
width: 980px;
margin: auto;
position: relative;
z-index: 1;
}
.menu li {
float: left;
margin-left: 2px;
}
.menu li a{
display: inline-block;
padding: 6px 20px;
color: #FFF;
text-decoration: none;
font-size: 13px;
font-weight: 500;
background-color: #23A4CE;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border: 1px solid #23A4CE;
border-bottom: none;
}
.menu li a:hover, .menu li a.active {
background-color: #E2E7EA;
color: #222;
border: 1px solid #c4c4c4;
border-bottom: none;
}
.menu li:hover ul, .menu li.active ul{
display: block;
}
.menu li a.cap {
background-color: #222;
border: 1px solid #222;
border-bottom: none;
}.menu li a.cap:hover {
background-color: #E2E7EA;
color: #222;
border: 1px solid #c4c4c4;
border-bottom: none;
}
.submenu{
list-style: none;
position: absolute;
float: left;
background-color: #E2E7EA;
width: 1022px;
;
display: none;
padding-left: 30px;
}.submenu li{
float: left;
margin: 0;
}.submenu li a{
background-color: transparent;
border: none;
color: #7F888A;
padding: 9px 15px;
font-size: 11px;
}.submenu li a:hover{
border: none;
}
.menu li:hover ul, .menu li.over ul{
display: block;
}
.submenu li a.selection{
color: #23A4CE;
}Discussão (2)
Carregando comentários...