Question

在选择标题时，我无法找到保持标签打开的方法。目前，只有当鼠标悬停在鼠标悬停时，标签才会保持打开状态，但只要鼠标移动到另一个区域，标签就会关闭。谢谢

 }


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

我正在尝试让下拉菜单保持打开状态，即使鼠标不再悬停，直到选择了另一个类别

Answer 1

查看我之前做过的这个演示http://dabblet.com/gist/1728264 - 我认为它完全符合您的要求。

纯CSS3垂直手风琴

1 个答案: