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> 

당신은 자바 스크립트를 사용하여 선택한 페이지의 경로를 강조 필요에 따라 클래스를 추가 할 수 있습니다.

$(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을 볼 수 있습니다. 에너지 효율을 높이면 현재 페이지뿐 아니라 모든 부모가 강조 표시됩니다.