li的选择状态

Question

我对菜单有疑问。如果我选择li项目，我希望所选项目具有与li:hover状态相同的背景色属性并保持不变，直到我将鼠标悬停并选择另一个li项目。

这是我的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&ouml;k h&auml;r</p> 
      </a></li> 
     </ul> 
    </div> 
</div> 

，这是我的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; 
} 

如果我例如用于：主动有相同的属性.submenuYH ul li:hover它甚至会保持这些属性我释放鼠标后？

Answer 1

代码你作为一个无序列表，如有必要，样式和位置ID和班级菜单：

<nav id="menu"> 
    <ul> 
     <li id="parentLi"><a><span>YH Högskola</span></a> 
      <ul class="submenu"> 
       <li id="childLi"><a href="#">Visual Merchandiser YH</a></li> 
       <li id="siblingLi1"><a href="#">LIA</a></li> 
       <li id="siblingLi2"><a href="#">FAQ</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

您可以使用JavaScript，并根据需要为高亮所选页面路径添加类。

$(document).ready(function() { 
    $('#parentLi').addClass('current'); 
    $('#childLi').addClass('selected'); 
)}; 

然后就创建类.current和.selected具有相同的风格为您的悬停。
你需要有风格，如这些CSS选择器：

#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 { 
    } 

你可以看到完整的效果on this site。当你盘旋能源效率，你会看到所有的父母都突出显示以及当前页面