<!DOCTYPE html>
<html>
<head>
<title>Accordion Menu Using Only HTML & CSS
</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>



  <div class="container-accordion">
    <nav>
      <ul>
        <li>
        <input type="radio" id='r1' name='r'>
    <label for='r1'><i class="fas fa-home"></i>Home</label>
        <ul>
          <li><a href="#">Home 01</a></li>
          <li><a href="#">Home 02</a></li>
          <li><a href="#">Home 03</a></li>
        </ul>
        </li>
      </ul>

      <ul>
        <li>
        <input type="radio" id='r2' name='r'>
    <label for='r2'><i class="far fa-envelope"></i>Messages</label>
        <ul>
          <li><a href="#">Messages 01</a></li>
        </ul>
        </li>
      </ul>

      <ul>
        <li>
        <input type="radio" id='r3' name='r'>
    <label for='r3'><i class="fas fa-cog"></i>Settings</label>
        <ul>
          <li><a href="#">Settings 01</a></li>
          <li><a href="#">Settings 02</a></li>
        </ul>
        </li>
      </ul>

      <ul>
        <li>
        <input type="radio" id='r4' name='r'>
    <label for='r4'><i class="fas fa-hands-helping"></i>Help</label>
        <ul>
          <li><a href="#">Help 01</a></li>
          <li><a href="#">Help 02</a></li>
          <li><a href="#">Help 03</a></li>
          <li><a href="#">Help 04</a></li>
        </ul>
        </li>
      </ul>

    </nav>
  </div>

</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');
*, html,body{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
  user-select:none;
}
body{
  background-color:#0d151d;
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.container-accordion{
  position:relative;
  width:300px;
}
.container-accordion nav input{
  display:none;
}
.container-accordion nav ul{
  list-style-type:none;
}
.container-accordion nav ul li{
  position:relative;
  background-color:#2980b9;
  color:#fff;
  font-size:17px;
  line-height:50px;
  text-indent:5px;
  border-bottom:1px solid rgba(0,0,0,.2);
  transition:.5s;
  cursor:pointer;
}
.container-accordion nav ul li label i{
  margin-right:5px;
}
.container-accordion nav ul li ul li:first-child:before{
  content:'';
  position:absolute;
  top:0px;
  left:10px;
  border-right:6px solid transparent;
  border-left:6px solid transparent;
  border-top:10px solid #2980b9;
}
.container-accordion nav ul li ul li:hover{
  border-left:3px solid #2980b9;
}
.container-accordion nav ul li label{
  display:block;
  cursor:pointer;
}
.container-accordion nav ul li ul{
  list-style-type:none;
  transform:scaleY(0);
  transform-origin:top;
  transition:.7s;
}
.container-accordion nav ul li ul li{
  background-color:#262626;
  display:none;
}
.container-accordion nav ul li ul li a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
}
.container-accordion nav ul li #r1:checked ~ ul{
  transform:scaleY(1);
}
.container-accordion nav ul li #r2:checked ~ ul{
  transform:scaleY(1);
}
.container-accordion nav ul li #r3:checked ~ ul{
  transform:scaleY(1);
}
.container-accordion nav ul li #r4:checked ~ ul{
  transform:scaleY(1);
}
.container-accordion nav ul li #r1:checked ~ ul li{
  display:block;
}
.container-accordion nav ul li #r2:checked ~ ul li{
  display:block;
}
.container-accordion nav ul li #r3:checked ~ ul li{
  display:block;
}
.container-accordion nav ul li #r4:checked ~ ul li{
  display:block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.