純粹的CSS3垂直手風琴

我很難找出一種方法來保持標籤打開時選擇標題。當鼠標懸停在上方時，該選項卡只會保持打開狀態，但只要鼠標移動到另一個區域，選項卡就會關閉。謝謝純粹的CSS3垂直手風琴

} 


.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); 
    }

這裏是代碼的其餘部分的示例：

 <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>

我想有下拉菜單保持打開，甚至當鼠標不再徘徊，直到選擇另一個類別

來源

2012-05-23 nycmixing

查看我之前做過的這個演示http://dabblet.com/gist/1728264 - 我認爲它完全符合你的要求。

來源

2012-05-23 13:10:27 Ana

+1這很好:) – sandeep

謝謝安娜！我在IE7和IE8中試用了你的代碼，在那裏它破裂了。我知道目標選擇器在IE7-8中都不兼容，但我想將其插入到更高級瀏覽器的腳本中，但我不確定腳本中的位置以及如何放置標記。謝謝！ – nycmixing

我的演示在IE8和IE9中工作，但沒有轉換。 IE7存在問題，您必須在打開面板之前將其懸停在面板上。它也不使用：目標或任何類型的JavaScript。爲了幫助集成，我需要首先看到你的HTML。 – Ana

純粹的CSS3垂直手風琴

回答

相關問題