Pure CSS3 Vertical Accordion

Question

헤더를 선택했을 때 탭을 열어 둘 수있는 방법을 찾지 못했습니다. 현재 탭은 마우스가 움직일 때만 열린 상태로 유지되지만 마우스를 다른 영역으로 옮기면 탭이 닫힙니다. 때까지,

 <div id="google-map"> 
<iframe src="frame link" name="frame" width="550" marginwidth="0" height="650" marginheight="0" scrolling="No" frameborder="0" id="frame-window"></iframe></div><div class="verticalaccordion" > 

    <ul> 
    <li> 
     <h3>Menu</h3> 
     <div> 
     <ul class="location"> 
      <li><a href="Link" target="frame">Link 1</a><br /> 
      <font color="#000000">Link Info</font></li> 
      <li><a href="Link 2" target="frame">Link 2</a><br /> 
      <font color="#000000"> Link Info</font> </li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
    </div> 

내가 마우스를 가져 가면 더 이상 경우에도 영업을하지 드롭 다운 메뉴를하려고 해요 : 여기

} 


.verticalaccordion>ul { 
    margin: 0; 
    padding: 0; 
    list-style:none; 
    width: 280px; 
    float: right; 

} 

.verticalaccordion>ul>li { 
    display:block; 
    overflow: hidden; 

    margin: 0; 
    padding: 0; 
    list-style:none; 
    height:40px; 
    width: 280px; 

    /* Decorative CSS */ 
    background-color:#f0f0f0; 


} 

.verticalaccordion>ul>li>h3 { 
    display:block; 
    margin: 0; 
    padding:10px; 
    height:19px; 

    /* Decorative CSS */ 
    border-top:#f0f0f0 1px solid; 
    font-family: Arial, Helvetica, sans-serif; 
    text-decoration:none; 

    color: #FFFFFF; 
    background: #074377; 


} 

.verticalaccordion>ul>li>div { 
    margin:0; 
    overflow: auto; 
    padding:10px; 
    height:220px; 

} 

.verticalaccordion>ul>li:hover { 
    height: 280px; 
} 

.verticalaccordion:hover>ul>li:hover>h3 { 
    /* Decorative CSS */ 
    color:#fff; 
    background: #CA006C; 
} 




    verticalaccordion section:target 
    { 
     width: 30em; 
     padding: 0 1em; 
     color: #333; 
     background-color: #fff; 
    } 
    verticalaccordion section:target h2 
    { 
     position: static; 
     font-size: 1.3em; 
     text-indent: 0; 
     color: #333; 
     -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 

코드의 나머지 부분의 샘플입니다 주셔서 감사합니다 다른 카테고리가 선택되었습니다.

Answer 1

이 데모를 확인하십시오. 얼마 전에 만들었습니다. http://dabblet.com/gist/1728264 - 나는 그것이 당신이 요구하는 것과 정확히 같다고 생각합니다.