chosen state of li item - css

Question

I have a question regarding a menu. If I select an li item, I want that selected item to have the same background-color property as the li:hover state and stay so, until I hover and choose another li item.
This is my html:
<div class="submenu-container">
<div class="submenunavYH">
<p>YH Högskola</p>
<div class="submenusettings"></div>
</div>
<div class="submenuYH submenu">
<ul>
<li><a href="utbild.html">
<p>Visual Merchandiser YH</p>
</a></li>
<li><a href="lia.html">
<p>LIA</p>
</a></li>
<li><a href="faq.html">
<p>FAQ</p>
</a></li>
<li><a href="ansok.html">
<p>Ansök här</p>
</a></li>
</ul>
</div>
</div>
and this is my css:
.submenu-container {
display: block;
position: relative;
width: 220px;
background-color: #f3f0ef;
margin: 3% auto 0;
padding: 0;
}
.submenunavYH, .submenunavRetail, .submenunavProjekt{
height: 40px;
text-align: center;
line-height: 2.5em;
color: #ffffff;
}
.submenunavYH{
background-color: #660066;
}
.submenunavRetail{
background-color: #336600;
}
.submenunavProjekt{
background-color: #000000;
}
.submenuYH ul li:hover {
border-left:3px solid #cc66cc;
background-color:rgba(204,102,204,0.1);
}
.submenuRetail ul li:hover {
border-left:3px solid #99CC66;
background-color:rgba(153, 204, 102,0.1);
}
.submenuProjekt ul li:hover {
border-left:3px solid #666666;
background-color:rgba(102, 102, 102,0.1);
}
.submenusettings {
height:20px;
float:right;
width:20px;
margin:10px;
}
.submenu ul {
list-style:none;
margin: 0;
padding: 0;
}
.submenu ul li {
border-top: 1px solid rgba(0,0,0,0.1);
padding: 11px 10px;
box-shadow: inset 0 1px 1px #fff;
text-indent: 10px;
}
.submenu ul li a {
font-size:14px;
color:#a4a3a3;
font-family: 'Strait', sans-serif;
font-size:14px;
text-decoration:none;
text-shadow: 1px 1px 1px #fff;
}
If I for example for a:active have the same attributes as the .submenuYH ul li:hover will it maintain those attributes even after I release the mouse?

Answer 1

code your menu as an unordered list with ids and classes as needed for style and position:
<nav id="menu">
<ul>
<li id="parentLi"><a><span>YH Högskola</span></a>
<ul class="submenu">
<li id="childLi">Visual Merchandiser YH</li>
<li id="siblingLi1">LIA</li>
<li id="siblingLi2">FAQ</li>
</ul>
</li>
</ul>
</nav>
You can use javascript and add classes as needed for highlighting path to selected page.
$(document).ready(function () {
$('#parentLi').addClass('current');
$('#childLi').addClass('selected');
)};
then just create the classes .current and .selected to have the same style as your hover.
You will need to have css selectors styled such as these:
#menu {
}
#menu > ul span {
}
#menu li ul li {
}
#menu li {
}
#menu li ul li:hover {
}
#menu li ul {
}
#menu li ul li {
}
#menu li ul li a {
}
You can see the full effect on this site. as you hover energy efficiency you will see that all of the parents are highlighted as well as the current page