Preciso que a cor do hover
permaneça ao abrir o submenu.
Meu submenu funciona, só quero que fique marcado o menu o qual ele está vinculado.
Segue o código de exemplo:
HTML:
<ul>
<li><a href="#">Link 1 »</a>
<ul>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
CSS:
ul {
width: 200px;
background: #ccc;
list-style: none;
padding: 0;
border: 1px solid #999;
}
ul li {
border-bottom: 1px solid #999;
position: relative;
}
ul li:last-child {
border-bottom: none;
}
ul li a {
color: #000;
display: block;
padding: 5px;
}
ul li a:hover {
background:#999;
}
ul li ul {
display:none;
position: absolute;
top:0;
left: 200px;
}
ul li:hover > ul {
display: block;
}
Pode vê-lo em funcionamento aqui: http://jsfiddle.net/ze8xtpxt/