How to create hamburger menu using HTML & CSS!

     <div class="hamContainer">        <input type="checkbox">        <div class="hamLines">            <span class="line line1"></span>            <span class="line line2"></span>            <span class="line line3"></span>        </div>        <div class="hamItems">            <ul>                <li><a href="home">home</a></li>                <li><a href="home">about</a></li>                <li><a href="home">content</a></li>                <li><a href="home">about</a></li>                <li><a href="home">privacy</a></li>                <li><a href="home">download</a></li>            </ul>        </div>     </div>

*{  padding: 0;  margin: 0;  box-sizing: content-box;}body{  background-color: blueviolet;  display: flex;  justify-content: center;  align-content: center;}.hamContainer{  margin-top: 5%;  width: 30rem;}.hamContainer input{  height: 50px;  width: 50px;  z-index: 3;  opacity: 0;}.hamContainer .hamLines{   width: 50px;   height: 50px;   display: flex;   flex-direction: column;   justify-content: space-between;   align-content: center;   position: absolute;   top: 10%;   z-index: -1;   /* opacity: 0; */}.hamContainer .hamLines span{  height: 5px;  width: 65px;  background: black;}.hamContainer .hamItems{     height: 25rem;     width: 20rem;     background: #ffff;     display: flex;     justify-content: center;     align-content: center;     display: none;     padding: 1rem;     border-radius: 30px;}.hamContainer .hamItems ul{     list-style: none;     text-decoration: none;     text-transform: capitalize;     font-size: 2em;}.hamContainer .hamItems ul li{     margin: 1.5rem 0 0 2rem;}.hamContainer .hamItems ul li a{     text-decoration: none;     color: black;}.hamContainer .hamItems ul li a:hover{      background: #6666;      padding: 0.3rem 0.5rem;      border-radius: 30px;      border: 3px solid black;}.hamContainer  .hamLines .line1{  transform-origin: 0% 0%;  transition: transform 0.4s ease-in-out;}.hamContainer .hamLines .line2{  transition: transform 0.4s ease-in-out;}.hamContainer .hamLines .line3{  transform-origin: 0% 100%;  transition: transform 0.4s ease-in-out;}.hamContainer input[type="checkbox"]:checked ~ .hamItems{  display: block;}.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line1{  transform: rotate(45deg);}.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line2{  transform: scaleY(0);}.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line3{  transform: rotate(-45deg);}