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="#one">	-	Acura NSX	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Acura NSX	" target="_black">	-	Acura NSX	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Alfa Romeo 4C	" target="_black">	-	Alfa Romeo 4C	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Audi A8	" target="_black">	-	Audi A8	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Audi R8	" target="_black">	-	Audi R8	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Audi TT	" target="_black">	-	Audi TT	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	BMW 7-Series	" target="_black">	-	BMW 7-Series	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Chevrolet Corvette	" target="_black">	-	Chevrolet Corvette	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Jaguar F-Type	" target="_black">	-	Jaguar F-Type	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Jaguar XJ	" target="_black">	-	Jaguar XJ	</a></li>
<li><a href="	https://www.google.com/search?tbm=isch&source=hp&biw=&bih=&ei=IjHEW4ehIczSsAXDvaPwDg&btnG=Buscar&q=2018+	Lexus LC	" target="_black">	-	Lexus LC	</a></li>
<li><a...

CSS

body {
    padding:20px 50px;
    background-color:gray;
}
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 5px;
    display:none; 
}

.accordion > input:checked + label {
     background-color:#db4437;
}
.accordion > input:hover + label {
     background-color:yellow; color:#235ea6;
}

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