10+ CSS Accordion Menu Examples

This post contains a total of 10+ Hand-Picked CSS Accordion Menu Examples with Source Code. All these Accordion Menus are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Accordion Menu Examples

1. By Mori

Made by Mori. Smooth Accordion menu with sub menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Space Mono', monospace;
    color: #3E474F;
}

body {
  overflow: hidden;
}

.wrapper {
    max-width: 600px;
    width: 100%;
    margin: 10vh auto;
}

h1 {
    font-size: 2em;
    margin-bottom: 20px;
    text-align:center;
}

input {
    display: none;
}

label {
    display: flex;
    width: 100%;
    height: 50px;
    cursor: pointer;
    border: 3px solid #3E474F;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

label div:first-child {
    width: 100%;
    line-height: 45px;
    margin-left: 10px;
    font-size: 1.2em;
}

.cross{
    margin-right:15px;
    margin-top:3px;
}

.cross:before,.cross:after {
    content: '';
    border-top: 2px solid #3E474F;
    width: 15px;
    display: block;
    margin-top: 18px;
    transition: 0.3s;
}

.cross:after {
    transform: rotate(90deg);
    margin-top: -2px;
}

.content {
    box-sizing: border-box;
    font-size: 0.9em;
    margin: 10px 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height, .5s;
}

input:checked ~ .content {
    max-height: 400px;
    transition: max-height, 1s;
}

input:checked ~ label .cross:before {
    transform: rotate(180deg);
}

input:checked ~ label .cross:after {
    transform: rotate(0deg);
}

.questions{
    margin-top:20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height, .5s;
}

.questions label{
    border:none;
    box-shadow: none;
    margin:0;
}

input:checked ~ .questions {
    max-height: 400px;
    border-bottom:2px solid #3E474F;
    transition: 1s;
}

/*----------tool-tip------------*/

.tip {
    color: #f03768;
    cursor: help;
    position: relative;
    overflow: visible;
    font-family: monospace;
    font-size: 1.3em;
}

.tip:before,
.tip:after {
    position: absolute;
    opacity: 0;
    z-index: -100;    
    transform: translateY(-30%);
    transition: .4s;
}

.tip:before {
    content: '';
    border-style: solid;
    border-width: 0.8em 0.5em 0 0.5em;
    border-color: #3E474F transparent transparent transparent;
    transform: translateY(-200%);
    bottom:90%;
    left:50%;
}

.tip:after {
    content: attr(data-tip);
    background: #3E474F;
    color: white;
    width: 150px;
    padding: 10px;
    font-size: 0.8em;
    bottom: 150%;
    left: -50%;
}

.tip:hover:before,
.tip:hover:after {
    opacity: 1;
    z-index: 100;
    transform: scaleY(1);
}
</style>
</head>
<body>
  <div class="wrapper">
  <h1>Text</h1>
  <div class="wrap-1">
    <input type="radio" id="tab-1" name="tabs">
    <label for="tab-1"><div>tab one</div><div class="cross"></div></label>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium minima, excepturi quis maiores. Eaque quae, nam delectus explicabo, deserunt ipsum!</div>
  </div>

  <div class="wrap-2">
    <input type="radio" id="tab-2" name="tabs">
    <label for="tab-2"><div>tab two</div><div class="cross"></div></label>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium minima, excepturi quis maiores. Eaque quae, nam delectus <span class="tip" data-tip="Eaque quae, nam delectus explicabo, deserunt ipsum!">explicabo</span>,
      deserunt ipsum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="tip" data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">Mollitia</span> autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium
      minima, excepturi quis maiores. Eaque quae, nam delectus explicabo, <span class="tip" data-tip="Lorem ipsum dolor sit amet.">deserunt</span> ipsum!</div>
  </div>

  <div class="wrap-3">
    <input type="radio" id="tab-3" name="tabs">
    <label for="tab-3"><div>tab three</div><div class="cross"></div></label>
    <div class="questions">
      <div class="question-wrap">
        <input type="radio" id="question-1" name="question">
        <label for="question-1"><div>question one</div> <div class="cross"></div></label>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam atque, soluta doloribus distinctio saepe labore voluptates facere illum alias perferendis praesentium quia vel accusamus incidunt corporis veniam sapiente. Voluptate, quasi.
        </div>
      </div>
      <div class="question-wrap">
        <input type="radio" id="question-2" name="question">
        <label for="question-2"><div>question two</div> <div class="cross"></div></label>
        <div class="content">
          Ipsam atque, soluta doloribus distinctio saepe labore voluptates facere illum alias perferendis praesentium quia vel accusamus incidunt corporis veniam sapiente. Voluptate, quasi.
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

2. By Theodore Kluge

Made by Theodore Kluge. Simple CSS Accordion menu with shadow effect on click. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Roboto:300,400'>
  
<style>
body {
	height: calc(100% - 20px);
	width: calc(100% - 20px);
	margin: 0;
	padding: 10px;
	display: flex;
	background: #f2f2f2;
	color: rgba(0,0,0,.87);
	font-family: 'Roboto', sans-serif;
}
.accordion {
	margin: auto;
	width: 400px;
}
.accordion input {
	display: none;
}
.box {
	position: relative;
	background: white;
    height: 64px;
    transition: all .15s ease-in-out;
}
.box::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
header.box {
	background: #00BCD4;
	z-index: 100;
	cursor: initial;
	box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
}
header .box-title {
	margin: 0;
	font-weight: normal;
	font-size: 16pt;
	color: white;
	cursor: initial;
}
.box-title {
	width: calc(100% - 40px);
	height: 64px;
	line-height: 64px;
	padding: 0 20px;
	display: inline-block;
	cursor: pointer;
	-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.box-content {
	width: calc(100% - 40px);
	padding: 30px 20px;
	font-size: 11pt;
	color: rgba(0,0,0,.54);
	display: none;
}
.box-close {
	position: absolute;
	height: 64px;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	display: none;
}
input:checked + .box {
	height: auto;
	margin: 16px 0;
    box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}
input:checked + .box .box-title {
	border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .box .box-content,
input:checked + .box .box-close {
	display: inline-block;
}
.arrows section .box-title {
	padding-left: 44px;
	width: calc(100% - 64px);
}
.arrows section .box-title:before {
	position: absolute;
	display: block;
	content: '\203a';
	font-size: 18pt;
	left: 20px;
	top: -2px;
	transition: transform .15s ease-in-out;
	color: rgba(0,0,0,.54);
}
input:checked + section.box .box-title:before {
	transform: rotate(90deg);
}
</style>
</head>
<body>
	<nav class="accordion arrows">
		<header class="box">
			<label for="acc-close" class="box-title">Accordion menu</label>
		</header>
		<input type="radio" name="accordion" id="cb1" />
		<section class="box">
			<label class="box-title" for="cb1">Readme</label>
			<label class="box-close" for="acc-close"></label>
			<div class="box-content">Click on an item to open. Click on its header or the list header to close.</div>
		</section>
		<input type="radio" name="accordion" id="cb2" />
		<section class="box">
			<label class="box-title" for="cb2">Read me too</label>
			<label class="box-close" for="acc-close"></label>
			<div class="box-content">Add the class 'arrows' to nav.accordion to add dropdown arrows.</div>
		</section>
		<input type="radio" name="accordion" id="cb3" />
		<section class="box">
			<label class="box-title" for="cb3">Item 3</label>
			<label class="box-close" for="acc-close"></label>
			<div class="box-content">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque finibus tristique nisi, maximus ullamcorper ante finibus eget.</div>
		</section>

		<input type="radio" name="accordion" id="acc-close" />
	</nav>
</body>
</html>

3. By Coding Beast

Made by Coding Beast. CSS Accordion with icon animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://kit.fontawesome.com/1c2c2462bf.js" crossorigin="anonymous"></script>

<style>
body {
  width: 100%;
  height: 100%;
  margin: 0;
  perspective: 900;
  overflow-y: scroll;
  background-color: #f6483b;
  font-family: "Titillium Web", sans-serif;
  color: rgba(48, 69, 92, 0.8);
}

.accordion-menu {
  display: inline-block;
  position: relative;
  left: 50%;
  margin: 150px 0;
  transform: translate(-50%, 0);
  max-width: 300px;
  padding: 10px 20px 20px;
  border-radius: 5px;
}

h2 {
  font-size: 18px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
  color: #6c6c6a;
}

p {
  color: rgba(48, 69, 92, 0.8);
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 14px;
  z-index: 2;
}

ul {
  list-style: none;
  perspective: 900;
  padding: 0 20px 10px;
  margin: 0;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(255, 255, 255, 0.19);
}

ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}

ul li:nth-child(1) {
  border: none;
}

ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}

ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}

ul li:nth-of-type(3) {
  animation-delay: 1s;
}

ul li:last-of-type {
  padding-bottom: 0;
}

ul li .arrow {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}

ul li .fas {
  color: #f6483b;
  font-size: 15px;
  margin-right: 10px;
}

ul li .arrow:before, ul li .arrow:after {
  content: "";
  position: absolute;
  background-color: #f6483b;
  width: 3px;
  height: 9px;
}

ul li .arrow:before {
  transform: translate(-2px, 0) rotate(45deg);
}

ul li .arrow:after {
  transform: translate(2px, 0) rotate(-45deg);
}

ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}

ul li input[type=checkbox]:checked ~ .arrow:before {
  transform: translate(2px, 0) rotate(45deg);
}

ul li input[type=checkbox]:checked ~ .arrow:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

.transition, p, ul li .arrow:before, ul li .arrow:after {
  transition: all 0.25s ease-in-out;
}

.flipIn, h1, ul li {
  animation: flipdown 0.5s ease both;
}

.no-select, h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}
</style>
</head>
<body>
    <div class="accordion-menu">
        <ul>
            <li>
                <input type="checkbox" checked>
                <i class="arrow"></i>
                <h2><i class="fas fa-code"></i>Languages Used</h2>
                <p>This UI was written in HTML and CSS.
                </p>
            </li>
            <li>
                <input type="checkbox" checked>
                <i class="arrow"></i>
                <h2><i class="fas fa-question"></i>How it Works</h2>
                <p>Text
                </p>
            </li>
            <li>
                <input type="checkbox" checked>
                <i class="arrow"></i>
                <h2><i class="fas fa-laugh"></i>Points of Interest</h2>
                <p>Text
                </p>
            </li>
        </ul>
    </div>
</body>
</html>

4. By Simto Alev

Made by Simto Alev. Pure CSS Accordion Content With Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
<style>
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700';

body {
	background: #ECF0F1;
	font-family: 'Source Sans Pro';
	font-weight: 400;
}

h1 {
	font-size: 35px;
	color: #2C97DE;
	text-align: center;
}

.accordionMenu {
	width: 500px;
	margin:0 auto;
}
.accordionMenu input[type=radio] {
	display: none;
}
.accordionMenu label {
	display: block;
	height: 50px;
	line-height: 47px;
	padding: 0 25px 0 10px;
	background: #2C97DE;
	font-size: 18px;
	color: #FFF;
	position: relative;
	cursor: pointer;
	border-bottom: 1px solid #e6e6e6;;
}
.accordionMenu label:after {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	right: 10px;
	top: 20px;
	z-index: 10;
	transition: all 0.3s ease-in-out;
}

.accordionMenu .content {
	max-height: 0;
	height: 0;
	overflow: hidden;
		transition: all 2s ease-in-out;
	
}
.accordionMenu .content .inner {
	font-size: 1.2rem;
  color: #2C97DE;
	line-height: 1.5;
	background: white;
	padding: 20px 10px;
}

.accordionMenu input[type=radio]:checked + label:after {
	transform: rotate(90deg);
}

.accordionMenu input[type=radio]:checked + label + .content {
	max-height: 2000px;
	height: auto;
	 
}
</style>
</head>
<body>
  <h1></h1>

<div class="accordionMenu">
	<input type="radio" name="trg1" id="acc1" checked="checked">
	<label for="acc1">Quisquam dolorem eos</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolorem autem sit accusamus quis minima voluptatibus, ex placeat corporis explicabo perspiciatis deserunt voluptate a voluptas molestiae magni eligendi natus corrupti.</div>
	</div>

	<input type="radio" name="trg1" id="acc2">
	<label for="acc2">Fugiat esse odit animi</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cupiditate libero veritatis inventore hic repellendus maiores temporibus, animi eligendi incidunt, aut, similique at. Vitae cumque, iste facilis, adipisci esse quia.</div>
	</div>

	<input type="radio" name="trg1" id="acc3">
	<label for="acc3">Quibusdam adipisci</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam eaque temporibus tempora ullam ducimus totam veniam voluptatibus saepe officia inventore numquam, autem repudiandae neque debitis nulla odio dolores vero.</div>
	</div>

	<input type="radio" name="trg1" id="acc4">
	<label for="acc4">Harum animi placeat</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A similique inventore qui atque reprehenderit repudiandae expedita voluptatum aliquam corporis, quod delectus, rerum doloribus in maiores facere quo culpa, debitis mollitia.</div>
	</div>

	<input type="radio" name="trg1" id="acc5">
	<label for="acc5">Obcaecati quibusdam conse</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores nobis distinctio expedita id fuga enim accusantium error libero similique non autem quis voluptate, voluptas, porro perferendis, adipisci ipsam laudantium in!</div>
	</div>

	<input type="radio" name="trg1" id="acc6">
	<label for="acc6">Modi excepturi</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis laborum modi velit eum a impedit inventore molestias repellendus illum, cum voluptatum harum quaerat sed, cumque sit officia molestiae autem voluptatibus.</div>
	</div>
</div>
</body>
</html>

5. By Bilal.Rizwaan

Made by Bilal.Rizwaan. Simple Accordion Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,[email protected],300&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),
    url("https://i.postimg.cc/1R20Py9h/507.jpg") no-repeat center;
  background-size: 100% 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rowdies", cursive;
}
.center {
  width: 600px;
  margin: auto;
}
section a {
  background: #fff;
  color: #000;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  display: block;
  font-size: 1.3em;
  letter-spacing: 3px;
  overflow: hidden;
  border-bottom: 3px solid #aaa69d;
}
section p {
  padding: 10px;
  font-family: ;
  overflow: hidden;
  height: 0;
  opacity: 0;
  background: #27ae60;
  color: #fff;
  overflow: hidden;
  letter-spacing: 2px;
  transition: 2s;
}
section:target p {
  height: 10em;
  opacity: 1;
  padding: 20px;
}
</style>
</head>
<body>
  <div class="center">
  <section id="item1">
    <a href="#item1">Lorem Ipum is the dummy text</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel beatae consequatur suscipit vero magnam nulla molestias alias praesentium atque, commodi error quis, unde aliquam distinctio blanditiis! Beatae, temporibus reprehenderit!</p>
  </section>
  <section id="item2">
    <a href="#item2">Lorem Ipum is the dummy text</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel beatae consequatur suscipit vero magnam nulla molestias alias praesentium atque, commodi error quis, unde aliquam distinctio blanditiis! Beatae, temporibus reprehenderit!</p>
  </section>
  <section id="item3">
    <a href="#item3">Lorem Ipum is the dummy text</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel beatae consequatur suscipit vero magnam nulla molestias alias praesentium atque, commodi error quis, unde aliquam distinctio blanditiis! Beatae, temporibus reprehenderit!</p>
  </section>
  <section id="item4">
    <a href="#item4">Lorem Ipum is the dummy text</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel beatae consequatur suscipit vero magnam nulla molestias alias praesentium atque, commodi error quis, unde aliquam distinctio blanditiis! Beatae, temporibus reprehenderit!</p>
  </section>
</div>
</body>
</html>

6. By Carla Inacio

Made by Carla Inacio. Horizontal Accordion menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
* {
  margin: 0;
  padding: 0;
  font-size: 1em;
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.accordion-menu {
  min-width:100%; 
  height: 20em;
  overflow: hidden;
}

a {
	text-decoration: none;
	color: inherit;
}

.item-title, li {
  font-family: sans-serif;
  font-size: 1.3em;
	color: #4256f9;
}

.section {
  display: inline-block;
  width: 3.5rem;
  height: 100%;
  margin-left: -3.8px;
}

.item-title {
  float: left;
  width:3.5rem;
  height: 100%;
  padding: 1rem 0.6rem 1rem 1rem;
  word-wrap: break-word;
  letter-spacing:8px;
  text-align:center;
  text-transform: uppercase;
}

.item-list {
  float: left;
  font-size: 0.8em;
  height: 100%;
  list-style: none;
}

li {
  display: inline-block;
  width: 3em;
  padding:1rem 0.6rem;
  height: 100%;  
  margin-left: -3.5px;
}

span {
  position: relative;
  bottom: -14px;
}

.accordion-menu .section:target {
  width: 12.62em;
  transition: all 1s;
} 

/* Color cyan section */
.section:first-child {
  background-color: #00ffff;
}

.item-list-1 li:first-child {
   background-color: #88ffff;
}

.item-list-1 li:nth-child(2) {
   background-color: #b2ffff;
}

.item-list-1 li:nth-child(3) {
   background-color: #ccffff;
}

/* Color magenta section */
.section:nth-child(2) {
    background-color: #ff00ff;
}

.item-list-2 li:first-child {
   background-color: #ff55ff;
}

.item-list-2 li:nth-child(2) {
   background-color: #ff7fff;
}

.item-list-2 li:nth-child(3) {
   background-color: #ff99ff;
}

/* Color yellow section */
.section:nth-child(3) {
    background-color: #ffff00;
}

.item-list-3 li:first-child {
   background-color: #ffff77;
}

.item-list-3 li:nth-child(2) {
   background-color: #ffffaa;
}

.item-list-3 li:nth-child(3) {
   background-color: #ffffcc;
}

/* Color black section */
.section:nth-child(4) {
    background-color: #000000;
}

.item-list-4 li:first-child {
   background-color: #212121;
}

.item-list-4 li:nth-child(2) {
   background-color: #313131;
}

.item-list-4 li:nth-child(3) {
   background-color: #3b3b3b;
}
</style>
</head>
<body>
  <body>
  <div class="accordion-menu">
      <div class="section clearfix" id="acc1" >
        <a href="#acc1"><h2 class="item-title">Cyan<span class="value">100%</span></h2></a>
        <ul class="item-list item-list-1">
          <li class="value">75%</li>
          <li class="value">50%</li>
          <li class="value">25%</li>
        </ul>
      </div> 
      <div class="section clearfix" id="acc2">
        <a href="#acc2"><h2 class="item-title">Magenta<span class="value">100%</span></h2></a>
        <ul class="item-list item-list-2">
          <li class="value">75%</li>
          <li class="value">50%</li>
          <li class="value">25%</li>
        </ul>
      </div> 
        <div class="section clearfix" id="acc3">
        <a href="#acc3"><h2 class="item-title">Yellow<span class="value">100%</span></h2></a>
        <ul class="item-list item-list-3">
          <li class="value">75%</li>
          <li class="value">50%</li>
          <li class="value">25%</li>
        </ul>
      </div>
      <div class="section clearfix" id="acc4">
        <a href="#acc4"><h2 class="item-title">Black<span class="value">100%</span></h2></a>
        <ul class="item-list item-list-4">
          <li class="value">75%</li>
          <li class="value">50%</li>
          <li class="value">25%</li>
        </ul>
      </div>
  </div>  
</body>
</html>

7. By The Code Father

Made by The Code Father. CSS Accordion menu with Hover effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
:root{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*{
    text-decoration: none;
    color:white;
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display:flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #555;
    overflow: hidden;
}

.menu{
    width: 300px;
    height: auto;
    background: #162447;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.menu .btn{
    display:block;
    padding: 1rem;
    border-bottom: solid 1px #1b1b2f;
    border-top: solid 1px #1f4068;
    position: relative;
}

.menu .submenu {
    background: #1b1b2f;
    overflow: hidden;
    max-height: 0;
    transition: max-height .8s ease-out;
}

.menu .submenu a{
    display:block;
    padding: 1rem;
    position: relative;
}

.menu .submenu a::before{
    content:'';
    display:block;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 5px;
    background: #e43f5a;
    opacity: 0;
    transition: all .5s;
}

.menu .submenu a:hover{
    padding-left: calc(1rem + 5px);
}

.menu .submenu a:hover::before{
    opacity: 1;
}

.item:target .submenu{
    max-height: 20rem;
}
</style>
</head>
<body>
  <div class="menu">
        <li class="item" id="mn1">
            <a class="btn" href="#mn1">Lorem</a>
            <div class="submenu">
                <a href="#">Lorem</a>
                <a href="#">Lorem</a>
                <a href="#">Lorem</a>
            </div>
        </li>
        <li class="item" id="mn2">
            <a class="btn" href="#mn2">Lorem</a>
            <div class="submenu">
                <a href="#">Lorem</a>
                <a href="#">Lorem</a>
                <a href="#">Lorem</a>
            </div>
        </li>
        <li class="item" id="mn3">
            <a class="btn" href="#mn3">Lorem</a>
            <div class="submenu">
                <a href="#">Lorem</a>
                <a href="#">Lorem</a>
                <a href="#">Lorem</a>
            </div>
        </li>
    </div>
</body>
</html>

8. By Lachlan Campbell

Made by Lachlan Campbell. Basic Accordion menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<style>
#accordion-button, .content {
  display: none;
}

.accordion-label:before {
  content: '(click to open)';
}

#accordion-button:checked ~ .accordion-label:before {
  content: '(click to close)';
}

.accordion-label {
  cursor: pointer;
}

#accordion-button:checked ~ .content {
  display: block;
}

/* --------- */

body {
  width: 100%;
  height: 100%;
  background-color: #F2F2F2;
}

.panel {
  margin: 15% auto;
  display: block;
  padding: 1em;
}
</style>
</head>
<body translate="no" >
  <div class="container">
  <div class="panel">
    <input type="checkbox" class="accordion-button" id="accordion-button">
    <label for="accordion-button" class="accordion-label">
      Pure CSS Accordion Menu
    </label>
    <div class="content">
      <p>Text</p>
    </div>
  </div>
</div>
</body>
</html>

9. By Graeme Attkins

Made by Graeme Attkins. CSS3 Multiple Accordion Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family:arial, sans-serif;
	font-weight:normal;
	font-size:12px;
	background:#3f4348 url('http://www.frecosse.com/workshop/accordion_menu/bg.png');
}

ul {
	list-style:none;
	margin:0; 
	padding:0;
	width:300px;
	margin:0 auto;
	-moz-box-shadow: 0 0 5px #111;
	-webkit-box-shadow: 0 0 5px #111;
	box-shadow: 0 0 5px #111;
}

ul li label {
	background: #575e63; /* fallback colour */
	border-top:1px solid #878e98;
	border-bottom:1px solid #33373d;
	color: #fff;
	text-shadow: 0 1px 1px #000;
	letter-spacing: 0.09em;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575e63), to(#3f4347));
	background: -webkit-linear-gradient(top, #575e63, #3f4347);
	background: -moz-linear-gradient(top, #575e63, #3f4347);
	background: -ms-linear-gradient(top, #575e63, #3f4347);
	background: -o-linear-gradient(top, #575e63, #3f4347);
}

ul li input[type='checkbox'] {
	display: none;
}

ul li label {
	display:block;
	padding:12px;
	width:300px;
}

ul li i {
	font-size:18px;
	vertical-align: middle;
	width:20px;
	display:inline-block;
}

ul li span {
	display:inline;
	float:right;
	background:#48515c;
	border:1px solid #3c434c;
	border-bottom:1px solid #707781;
	padding:4px 6px;
	font-size:10px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: inset 0 0 10px #111;
	-webkit-box-shadow: inset 0 0 10px #111;
	box-shadow: inner 0 0 10px #111;
	position:relative;
}

ul li label:hover {
	background: #566f82; /* fallback colour */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#566f82), to(#3e505e));
	background: -webkit-linear-gradient(top, #566f82, #3e505e);
	background: -moz-linear-gradient(top, #566f82, #3e505e);
	background: -ms-linear-gradient(top, #566f82, #3e505e);
	background: -o-linear-gradient(top, #566f82, #3e505e);
}

ul li label:hover span {
	background:#3e505e;
}

ul li input[type='checkbox']:checked ~ label {
	background: #44c6eb; /* fallback colour */
	border-top:1px solid #878e98;
	border-bottom:1px solid #2799db;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#44c6eb), to(#2799db));
	background: -webkit-linear-gradient(top, #44c6eb, #2799db);
	background: -moz-linear-gradient(top, #44c6eb, #2799db);
	background: -ms-linear-gradient(top, #44c6eb, #2799db);
	background: -o-linear-gradient(top, #44c6eb, #2799db);
}

ul li input[type='checkbox']:checked ~ label span {
	background: #2173a1; /* fallback colour */
	border-top:1px solid #1b5f85;
	border-bottom:1px solid #4cb1e4;
	-moz-box-shadow: inset 0 0 5px #111;
	-webkit-box-shadow: inset 0 0 5px #111;
	box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
	height: auto;
	display:block;
	min-height:40px;
	max-height:400px;
}

ul ul {
	background:#fff; margin:0; padding:0;
	-moz-box-shadow: inset 0 2px 2px #b3b3b3;
	-webkit-box-shadow: inset 0 2px 2px #b3b3b3;
	box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
	display:block;
	padding:6px 12px;
	color:#999;
	text-decoration:none;
}

ul ul li a:hover {
	color:#44c6eb;
}

ul ul li a span {
	color:#999;
	background:none;
	border:1px solid #ccc; 
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

ul ul li {
	border-bottom:1px solid #ccc;
}

ul ul li:first-child {
	padding-top:6px;
}

ul ul li:last-child {
	padding-bottom:6px; border:0;
}

.options {
	height: 0;
	display: block;
	overflow: hidden;
}
	
/* Abridged icomoon font styles
/* (Hosted on Frecosse - Please don't hotlink!)
=============================================== */
@font-face {
	font-family: 'icomoon';
	src:url('http://www.frecosse.com/workshop/accordion_menu/icomoon.eot');
	src:url('http://www.frecosse.com/workshop/accordion_menu/icomoon.eot?#iefix') format('embedded-opentype'),
		url('http://www.frecosse.com/workshop/accordion_menu/icomoon.woff') format('woff'),
		url('http://www.frecosse.com/workshop/accordion_menu/icomoon.ttf') format('truetype'),
		url('http://www.frecosse.com/workshop/accordion_menu/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-music:before, .icon-search:before, .icon-fire:before, .icon-dribbble:before, .icon-flickr:before, .icon-deviantart:before, .icon-picassa:before, .icon-reddit:before, .icon-android:before, .icon-users:before, .icon-film:before, .icon-eye:before, .icon-point-right:before, .icon-microphone:before, .icon-download:before, .icon-warning:before, .icon-images:before, .icon-movie:before, .icon-cloud:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-music:before { content: "\61"; }
.icon-search:before { content: "\62"; }
.icon-fire:before { content: "\63"; }
.icon-dribbble:before { content: "\64"; }
.icon-flickr:before { content: "\65"; }
.icon-deviantart:before { content: "\66"; }
.icon-picassa:before { content: "\67"; }
.icon-reddit:before { content: "\68"; }
.icon-android:before { content: "\69"; }
.icon-users:before { content: "\6a"; }
.icon-film:before { content: "\6b"; }
.icon-eye:before { content: "\6c"; }
.icon-point-right:before { content: "\6d"; }
.icon-microphone:before { content: "\6e"; }
.icon-download:before { content: "\6f"; }
.icon-warning:before { content: "\70"; }
.icon-images:before { content: "\71"; }
.icon-movie:before { content: "\72"; }
.icon-cloud:before { content: "\73"; }
</style>
</head>
<body>
  <ul>
	<li class="block">
		<input type="checkbox" name="item" id="item1" />   
		<label for="item1"><i aria-hidden="true" class="icon-users"></i> Friends <span>124</span></label>
		<ul class="options">
			<li><a href="#"><i aria-hidden="true" class="icon-search"></i> Some Text</a></li>
			<li><a href="#"><i aria-hidden="true" class="icon-point-right"></i> Some Text</a></li>
			<li><a href="#"><i aria-hidden="true" class="icon-fire"></i> Some Text</a></li>
		</ul>
	</li>
	<li class="block">
		<input type="checkbox" name="item" id="item2" />   
		<label for="item2"><i aria-hidden="true" class="icon-film"></i> Videos <span>1,034</span></label>
		<ul class="options">
			<li><a href="#"><i aria-hidden="true" class="icon-movie"></i> Some Text <span>7</span></a></li>
			<li><a href="#"><i aria-hidden="true" class="icon-download"></i> Some Text <span>3</span></a></li>
			<li><a href="#"><i aria-hidden="true" class="icon-warning"></i> Some Text <span>1,024</span></a></li>
		</ul>
	</li>
	<li class="block">
		<input type="checkbox" name="item" id="item3" />   
		<label for="item3"><i aria-hidden="true" class="icon-images"></i> Galleries <span>4</span></label>
		<ul class="options">
			<li><a href="" target="_blank"><i aria-hidden="true" class="icon-deviantart"></i> Some Text</a></li>
			<li><a href="" target="_blank"><i aria-hidden="true" class="icon-dribbble"></i> Some Text</a></li>
			<li><a href="" target="_blank"><i aria-hidden="true" class="icon-flickr"></i> Some Text</a></li>
			<li><a href="" target="_blank"><i aria-hidden="true" class="icon-picassa"></i> Some Text</a></li>
		</ul>
	</li>
	<li class="block">
		<input type="checkbox" name="item" id="item4" />   
		<label for="item4"><i aria-hidden="true" class="icon-microphone"></i> Podcasts <span>1</span></label>
		<ul class="options">
			<li><a href="" target="_blank"><i aria-hidden="true" class="icon-music"></i> Some Text</a></li>
		</ul>
	</li>
	<li class="block">
		<input type="checkbox" name="item" id="item5" />   
		<label for="item5"><i aria-hidden="true" class="icon-android"></i> Robots <span>3</span></label>
		<ul class="options">
			<li><a href="" target="_blank"><i aria-hidden="true" class="icon-eye"></i> Some Text</a></li>
			<li><a href="" target="_blank"><i aria-hidden="true" class="icon-cloud"></i> Some Text</a></li>
			<li><a href="" target="_blank"><i aria-hidden="true" class="icon-reddit"></i> Some Text</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

10. By Anz Joy

Made by Anz Joy. Minimalistic accordion menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/*Acco*/
.ac-container {
    max-width: 400px;
}

.ac-container label {
    height: 30px !important;
    line-height: 21px !important;
    font-size: 12px !important;
    font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #fff;
    background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: linear-gradient(top,#fff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1);
    font-size: 12px;
    height: 30px;
    line-height: 20px;
}

.ac-container {
    width: 100%;
    margin: 10px auto 30px auto;
    text-align: left;
}

.ac-container label:hover {
    background: #fff;
}

.ac-container input:checked + label,.ac-container input:checked + label:hover {
    background: #f1f2f3;
    color: #666;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1);
    height: 30px;
    line-height: 21px;
    font-size: 13px;
}

.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;
}

.ac-container input:checked + label:hover:after {
    background-image: url(../images/arrow_up.png);
}

.ac-container input {
    display: none;
}

.ac-container article {
    background: rgba(255,255,255,0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}

.ac-container article p {
    font-style: normal;
    color: #777;
    line-height: 23px;
    font-size: 10px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    font: normal normal 12px 'Open Sans';
}

.ac-container input:checked ~ article {
    -webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}

.ac-container input:checked ~ article.ac-small {
    height: 140px;
}

.ac-container input:checked ~ article.ac-medium {
    height: 180px;
}

.ac-container input:checked ~ article.ac-large {
    height: 230px;
}
</style>
</head>
<body>
  <section class="ac-container">
				<div>
					<input id="ac-1" name="accordion-1" type="radio" checked="">
					<label for="ac-1">About us</label>
					<article class="ac-small">
						<p>Lorem</p>
					</article>
				</div>
				<div>
					<input id="ac-2" name="accordion-1" type="radio">
					<label for="ac-2">How we work</label>
					<article class="ac-medium">
						<p>Lorem</p>
					</article>
				</div>
				<div>
					<input id="ac-3" name="accordion-1" type="radio">
					<label for="ac-3">References</label>
					<article class="ac-large">
						<p>Lorem</p>
					</article>
				</div>
				<div>
					<input id="ac-4" name="accordion-1" type="radio">
					<label for="ac-4">Contact us</label>
					<article class="ac-large">
						<p>Lorem</p>
					</article>
				</div>
			</section>
</body>
</html>

11. By Eriksen

Made by Eriksen. CSS Vertical Accordion Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,300);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: 'Montserrat', sans-serif;
}
.container {
	width: 100%;
	height: 100%;
}
nav {
	position: fixed;
	display: flex;
	align-items: flex-start;
	width: 20%;
	height: 100%;
	background-color: #111;
}
main {
	position: fixed;
	right: 0;
	width: 80%;
	height: 100%;
	background-color: #fff;
	overflow: auto;
	padding: 40px;
}
h1 {
	font-weight: bold;
	margin-bottom: 50px;
	font-size: 55px;
	text-align: center;
}
p {
	margin-bottom: 20px;
	line-height: 26px;
}
p::first-letter {
	font-size: 200%;
	font-weight: bold;
}
li, ul label.title, ul, a {
	width: 100%;
	color: #FFF;
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	display: block;
	font-weight: bold;
}
ul label {
	height: 35px;
}
ul li{
	height: 35px;
	overflow: hidden;
	transition: all .3s;
}
li {
	display: block;
	background-color: #363636;
}
label.title {
	font-size: 14px;
	background: linear-gradient(#111, #2f2f2f);
	padding: 10px 15px;
	cursor: pointer;
  transition: all .25s;
}
a{
	font-size: 12px;
	text-decoration: none;
	color: #FFF;
	display: block;
	padding: 10px 25px;
	transition: all .25s;
}
a:hover {
	background-color: #444;
  box-shadow: inset 5px 0px 0px 0px #fff;
}
label:hover {
	text-shadow: 0px 0px 10px #fff;
}
input[type="radio"] {
	display: none;
}
#edit:checked + li, #archive:checked + li, #tools:checked + li, #preferences:checked + li {
	height: 179px;
}
i {
	margin-right: 12px;
}
@media screen and (max-width: 600px){
	nav {
		width: 100%;
		position: relative;
	}
	main {
		width: 100%;
		position: relative;
	}
}
</style>
</head>
<body>
  <div class="container">
		<nav class="menu">
			<ul>
				<input type="radio" name="menu" id="archive" checked>
				<li>
					<label for="archive" class="title"><i class="fa fa-folder"></i>Archive</label>
					<a href="#">New File</a>
					<a href="#">Open File</a>
					<a href="#">Save As...</a>
					<a href="#">Exit</a>
				</li>
				<input type="radio" name="menu" id="edit">
				<li>
					<label for="edit" class="title"><i class="fa fa-edit"></i>Edit</label>
					<a href="#">Copy</a>
					<a href="#">Cut</a>
					<a href="#">Paste</a>
					<a href="#">Undo</a>
				</li>
				<input type="radio" name="menu" id="tools">
				<li>
					<label for="tools" class="title"><i class="fa fa-gavel"></i>Tools</label>
					<a href="#">Build</a>
					<a href="#">Macros</a>
					<a href="#">Command</a>
					<a href="#">Snippets</a>
				</li>
				<input type="radio" name="menu" id="preferences">
				<li>
					<label for="preferences" class="title"><i class="fa fa-gears"></i>Preferences</label>
					<a href="#">Browser</a>
					<a href="#">Settings</a>
					<a href="#">Packages</a>
					<a href="#">Theme</a>
				</li>
			</ul>
		</nav>
		<main class="main">
			<h1>Heading</h1>
			<p>Lorem</p>
		</main>
	</div>
</body>
</html>