css3 accordion menu @designmodo

Add any number of links without touching your styles

by Emmanuel Garcia

HTML

<ul class="accordion">
      
  <li id="one" class="files">
    <a href="#one">Sport & Luxury Cars</a>
    <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 {margin:50px;}

/* Reset */
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
.accordion li {
  list-style: none;
}

/* Layout & Style */
.accordion li > a {
  display: block;
  position: relative;
  min-width: 110px;
  padding: 0 10px 0 40px;
  height: 32px;

  color: #fdfdfd;
  font: bold 12px/32px Arial, sans-serif;
  text-decoration: none;
  text-shadow: 0px 1px 0px rgba(0,0,0, .35);

  background: #6c6e74;
  background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
  background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
  -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.accordion > li:hover > a,
.accordion > li:target > a {
  color: #3e5706;
  text-shadow: 1px 1px 1px rgba(255,255,255, .2);
  
  /*background: url(../img/active.png) repeat-x;*/
  background: #a5cd4e;
  background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
  background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
  background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
  background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
  background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); 
}

.accordion li > a span {
  display: block;
  position: absolute;
  top: 7px;
  right: 0;
  padding: 0...