Make a More option Drop Down menu using JavaScript

in this tutorial, I will show you how to make a beautiful and cool drop-down menu using javascript
we will need to use font awesome to get some icons.

HTML

<!DOCTYPE HTML>

<html>

    <head>

        <link rel="stylesheet" href="main.css">

        <script src="https://kit.fontawesome.com/425a08e296.js"></script>

    </head>

    

    <body>

            <div class="container">

                <div class="header">

                   <h1>Post Title</h1>

                   <div class="option">

                       <i onclick="Toggle()"  class="fas fa-ellipsis-h"></i>

                   <ul id="menu">

                       <li>Share</li>

                       <li>edit</li>

                       <li>Delete</li>

                   </ul>

                   </div>

                   

                </div>

                <p>

                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae arcu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat.

                </p>

                

            </div>

            

            

            <script>

               

                var menu = document.getElementById('menu')

                function Toggle(){

                    if(menu.style.display== "block"){

                        menu.style.display = "none";

                    }else{

                        menu.style.display = "block";

                    }

                }

            </script>

    </body>

    

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

*{

    padding: 0;

    margin: 0;

    outline: 0;

}

body{

    background-color: #2196f3;

}

.container{

   background-color: #fff;

   box-shadow: 0 6px 8px rgba(0,0,0,.1);

   padding: 15px 20px;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    width: 400px;

    font-family: 'Nunito',sans-serif;

}

.option{

    position: absolute;

    right: 56px;

    transform: translateX(100%);

    top: 22px;

}

.option ul{

    position: relative;

    left: -40%;

    padding: 5px 10px;

    background-color: #fafafa;

    box-shadow: 0 6px 8px rgba(0,0,0,.3);

    list-style: none;

    width: 100px;

    display: none;

    user-select: none;

}

.option ul li{

    padding: 5px 10px;

    transition: .4s;

    text-align: center;

    cursor: pointer;

}

.option ul li:hover{

    background-color: #e0e0e0;

}

.option i{

    padding: 8px;

    border-radius: 30px;

    transition: .4s;

}

.option i:hover{

    background-color: #e2e2e2;

}