CODEWITHSUNDEEP
cssaccordion
nycmixing
nycmixing

Reputation: 127

Pure CSS3 Vertical Accordion

I am having trouble figuring out a way to keep the tab open when a header is selected. Currently the tab will only stay open when the mouse is hovering over, but as soon as the mouse is moved into another area, the tab closes. Thank you

 }


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

Here is a sample of the rest of the code:

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

I'm trying to have the drop down menu stay open, even when the mouse is no longer hovering, until another category is selected

Upvotes: 1

Views: 1651

Answers (1)

Ana
Ana

Reputation: 37179

Check this demo I've made a while ago http://dabblet.com/gist/1728264 - I think it does exactly what you're asking for.

Upvotes: 4

Related Questions