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。當你盤旋能源效率，你會看到所有的父母都突出顯示以及當前頁面