Basic CSS3 Accordion

by Emmanuel Garcia

HTML

<h3>Toggle</h3>
<div class="accordion">
    <input type="checkbox">
    <label>Sport & Luxury Cars</label>
    <div> <ul class="sub-menu">
<li><a href="http://www.google.com/images?q=2018+Acura NSX" target="_black">-Acura NSX</a></li>
<li><a href="http://www.google.com/images?q=2018+Alfa Romeo 4C" target="_black">-Alfa Romeo 4C</a></li>
<li><a href="http://www.google.com/images?q=2018+Audi A8" target="_black">-Audi A8</a></li>
<li><a href="http://www.google.com/images?q=2018+Audi R8" target="_black">-Audi R8</a></li>
<li><a href="http://www.google.com/images?q=2018+Audi TT" target="_black">-Audi TT</a></li>
<li><a href="http://www.google.com/images?q=2018+BMW 7-Series" target="_black">-BMW 7-Series</a></li>
<li><a href="http://www.google.com/images?q=2018+Chevrolet Corvette" target="_black">-Chevrolet Corvette</a></li>
<li><a href="http://www.google.com/images?q=2018+Jaguar F-Type" target="_black">-Jaguar F-Type</a></li>
<li><a href="http://www.google.com/images?q=2018+Jaguar XJ" target="_black">-Jaguar XJ</a></li>
<li><a href="http://www.google.com/images?q=2018+Lexus LC" target="_black">-Lexus LC</a></li>
<li><a href="http://www.google.com/images?q=2018+Lexus LS" target="_black">-Lexus LS</a></li>
<li><a href="http://www.google.com/images?q=2018+Mercedes-Benz GT" target="_black">-Mercedes-Benz GT</a></li>
<li><a href="http://www.google.com/images?q=2018+Mercedes-Benz S-Class" target="_black">-Mercedes-Benz S-Class</a></li>
<li><a href="http://www.google.com/images?q=2018+Mercedes-Benz SL-Class" target="_black">-Mercedes-Benz SL-Class</a></li>
<li><a href="http://www.google.com/images?q=2018+Mercedes-Benz SLC-Class" target="_black">-Mercedes-Benz SLC-Class</a></li>
<li><a href="http://www.google.com/images?q=2018+Nissan GT-R" target="_black">-Nissan GT-R</a></li>
<li><a href="http://www.google.com/images?q=2018+Porsche 911" target="_black">-Porsche 911</a></li>
<li><a href="http://www.google.com/images?q=2018+Porsche Boxster" target="_black">-Porsche...

CSS

label{border:5px;}
li{list-style-type: none; line-height:25px; }
li :hover{background-color:#235ea6; padding:3px; color:white;}
a{color: #235ea6; text-decoration:none; }
.accordion {
    position:relative;
    background-color:white;
    
}

.accordion > input {
    display:block;
    margin:0 0;
    
    width:100%;
    height:30px;
    position:relative;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    
}

.accordion > label {
    display:block;
    font:bold 12px/30px Arial,Sans-Serif;
    background-color: #235ea6;
    color:white;
    margin:-30px 0 0 0;
    padding:0 15px;
}

.accordion > div {
    padding:0px 0px;
    display:none;
}

.accordion > input:checked + label {
     background-color:#19a87a;
}
.accordion > input:hover + label {
     background-color:#19a87a; color:white;
}

.accordion > input:checked + label + div {
    display:block; 
}