<ul class="menu">
   <li class="list"><a href="#">List 1 </a> 
      <ul class="items">
         <li><a href="#"> Item 1-1</a></li>
         <li><a href="#"> Item 1-2</a></li>
         <li><a href="#"> Item 1-3</a></li>
      </ul>
   </li>
   <li class="list"><a href="#">List 2</a> 
      <ul class="items">
         <li> <a href="#" > Item 2-1 </a></li>
         <li> <a href="#" > Item 2-2 </a></li>
         <li> <a href="#" > Item 2-3 </a></li>
      </ul>
   </li>
   <li class="list"><a href="#">List 3</a> 
      <ul class="items">
         <li> <a href="#" > Item 3-1 </a></li>
         <li> <a href="#" > Item 3-2 </a></li>
         <li> <a href="#" > Item 3-2 </a></li>
      </ul>
   </li>
   <li class="list"><a href="#">List 4</a> 
      <ul class="items">
         <li> <a href="#" > Item 4-1 </a></li>
         <li> <a href="#" > Item 4-2 </a></li>
         <li class="list"><a href="#">List 4-1</a> 
            <ul  class="items">
               <li> <a href="#" > Item 4-1-1</a></li>
               <li> <a href="#" > Item 4-1-2</a></li>
               <li class="list"><a href="#">List 4-2</a> 
                  <ul  class="items">
                     <li> <a href="#" > Item 4-2-1</a></li>
                     <li> <a href="#" > Item 4-2-2</a></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>







<footer>
  <p>
    Created with <i class="fa fa-heart"></i> by
    <a target="_blank" href="https://codepen.io/ahmadbassamemran/">Ahmad Emran</a>
    Follow me : 
      <a target="_blank"  href="https://www.instagram.com/ahmadbassamemran/"><i class="fab fa-instagram"></i></a>
    <a target="_blank"  href="https://www.linkedin.com/in/ahmademarn/"><i class="fab fa-linkedin"></i></a>
    <a target="_blank" href="https://codepen.io/ahmadbassamemran/"><i class="fab fa-codepen"></i></a> 
        <a target="_blank" href="https://dev.to/ahmadbassamemran"><i class="fab fa-dev"></i></a> 
             <a target="_blank" href="https://twitter.com/ahmadbassamemra"><i class="fab fa-twitter-square"></i></a> 
  </p>
</footer>

<div class="youtubeBtn">
  <a target="_blank" href="https://www.youtube.com/AhmadEmran?sub_confirmation=1">
      <span>Watch on YouTube</span>
  <i class="fab fa-youtube"></i>
    </a>

</div>

body{
   padding: 0;
   margin: 0;
   background-color: #324252;
}
h1{
   font-family: 'Century Gothic';
   margin: 30px auto 30px auto;
   color: #09fbd2;
   width:100%;
   text-align: center;
}

ul.menu{
   padding: 0;
   list-style: none;
   width: 400px;
   margin: 20px auto;
   font-family: 'Century Gothic'; 
   box-shadow: 0px 0px 25px #00000070;
   clear: both;
   display: table;
   margin-bottom:100px;
   .list{
      font-size: 14px;
      border-bottom:1px solid #324252;
      position: relative;
      width: 100%;
      box-sizing: border-box;
      height: 50px;
      vertical-align: sub;
      background: #3e5165;
      clear: both;
      &:after{
         content: "\f107";
         font-family:FontAwesome;
         position: absolute;
         right: 17px;
         top: 17px;
         padding: 0px 5px;
         color:#fff;
      }
      &:before{
         content: '\f07b';
         font-family:FontAwesome;
         position: absolute;
         left: 17px;
         top: 17px;
         padding: 0px 5px;
         color:#fff;  
      }
      a{
         text-decoration: none;
         color: #fff;
         padding: 17px 0px 17px 45px;
         display: block;
         height: 100%;
         box-sizing: border-box;
         &:hover{
            background-color: #324252;
            transition:  300ms all;
            color: #09fbd2;
         }
      }
      .items{
         height: 0px;
         overflow: hidden;
         a{
            padding:17px;
            &:hover{
               background-color: #3f5d79;
               color:#fff;
               transition:  300ms all;

            }
         }
      }
      &:last-child{
         border-bottom:none;
      }
   }
   .active{
      &:after{
         content: "\f106";
         font-family:FontAwesome;
         position: absolute;
         right: 17px;
         top: 17px;
         padding: 0px 5px;
         color:#fff;
      }
      &:before{
         content: '\f07c';
         font-family:FontAwesome;
         position: absolute;
         left: 17px;
         top: 17px;
         padding: 0px 5px;
         color:#fff;  
      }
      >.items{
         display: block;
         background: #23313f;
         padding: 0px;
         height: auto;
         color:#fff;
         transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
         transition: all 200ms;
         clear: both;
         float: left;
         width: 100%;
         li{
            padding:0px;
            border-bottom:1px solid #324252;
            list-style: none;
         }
         li:last-child{
            border-color:transparent;
            padding-bottom: 0px;
         }
         .active{
            > .items{
               background-color: #2f4b67;
            }
         }
      }
      > a{
         color:#46efa4;
         text-transform: uppercase;
         font-weight: bold;

      }
      .list{
         background: #697d92;
         a{
            padding: 17px 0px 17px 45px;

         }
      }
   }
}






/*  footer   */
footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida  Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer .fa-heart{
    color: red;
}
footer .fa-dev{
    color: #fff;
}
footer .fa-twitter-square{
  color:#1da0f1;
}
footer .fa-instagram{
  color: #f0007c;
}
fotter .fa-linkedin{
  color:#0073b1;
}
footer .fa-codepen{
  color:#fff
}
footer a {
    color: #3c97bf;
    text-decoration: none;
  margin-right:5px;
}
.youtubeBtn{
    position: fixed;
    left: 50%;
  transform:translatex(-50%);
    bottom: 45px;
    cursor: pointer;
    transition: all .3s;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
}
.youtubeBtn i{
   font-size:20px;
  float:left;
}
.youtubeBtn a{
    color:#ff0000;
    text-shadow: 0px 2px 5px rgba(0,0,0,.5);
    animation: youtubeAnim 1000ms linear infinite;
  float:right;
}
.youtubeBtn a:hover{
  color:#c9110f;
  transition:all .3s ease-in-out;
  text-shadow: none;
}
.youtubeBtn i:active{
  transform:scale(.9);
  transition:all .3s ease-in-out;
}
.youtubeBtn span{
    font-family: 'Lato';
    font-weight: bold;
    color: #fff;
    display: block;
    font-size: 12px;
    float: right;
    line-height: 20px;
    padding-left: 5px;
  
}

@keyframes youtubeAnim{
  0%,100%{
    color:#c9110f;
  }
  50%{
    color:#ff0000;
  }
}
/* footer  */

const list = document.querySelectorAll('.list');

function accordion(e){
    e.stopPropagation(); 
    if(this.classList.contains('active')){
        this.classList.remove('active');
    }
    else if(this.parentElement.parentElement.classList.contains('active')){
        this.classList.add('active');
    }
    else{
        for(i=0; i < list.length; i++){
          list[i].classList.remove('active');
        }
            this.classList.add('active');
        }
}
for(i = 0; i < list.length; i++ ){
    list[i].addEventListener('click', accordion);
}