Pure CSS Fold Out Dropdown menu without Jquer

Pure CSS Fold Out Dropdown menu without Jquer

Thanks to everyone, before I showed you how to make SLIDE DROP DOWN MENU without any Jquery. In the same sequence, I am going to show how you will see Fold Out Dropdown navbar. I did not use Jquery this time as the previous time. Pure CSS Fold Out Dropdown Navbar which is just made with CSS. 

Part 1: Basic HTML Code

<nav class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Nav Item 1</a>
<ul>
<li><a href="#">Subnav Item 1</a></li>
<li><a href="#">Subnav Item 2</a></li>
<li><a href="#">Subnav Item 2</a></li>
</ul>
</li>
<li><a href="#">Nav Item 2</a>
<ul>
<li><a href="#">Subnav Item 1</a></li>
<li><a href="#">Subnav Item 2</a></li>
<li><a href="#">Subnav Item 3</a></li>
</ul>
</li>
<li><a href="">Nav Item 3</a></li>
<li><a href="">Nav Item 4</a></li>
<li><a href="">Nav Item 5</a></li>
</ul>
<div class="clear"></div>
</nav>

Step 2: CSS Code

html,body{
  padding: 0;
  margin: 0;
}
body{
  background-color: rgba(255, 0, 0, 0.5);
}
.clear{
  clear: both;
}

.nav{
  background-color: #fff;
}
.nav ul {
    list-style:none;
    margin:0;
    padding:0;
    z-index: 1;
}

.nav ul li {
    float:left;
    position:relative;
}
.nav a {
    display:block;
    padding:0 20px;
    line-height: 50px;
    color:#000;
    border-left:1px solid #595959;
    text-decoration: none;
    font-family: lato;
    font-weight: bold;
}
.nav a:hover {
    text-decoration:none;
    background:#e7e7e7;
}
/*-- DropDown --*/
.nav li ul {
    background:#fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav li ul li {
    min-width:200px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.nav li ul a {
    border:none;
}
.nav li ul a:hover {
    background:rgba(0,0,0,0.2);
}

/*-- animation --*/
.nav li ul {
    position:absolute;
    left:0;
    top:50px;
    z-index:1;
    max-height:0;
    overflow:hidden;
    -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin:50% 0;
    -webkit-transition:350ms;
    -moz-transition:350ms;
    -o-transition:350ms;
    transition:350ms;
}
.nav ul > li:hover ul {
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
}

See the Pen Pure CSS Fold Out Dropdown navbar by Rashedul Hasan (@rhsuman) on CodePen.