classList toggle(show) doesn't work, help please

I would like to toggle on the "cart" of my website. When it is clicked,there will be a dropdown block. It works well on my another website and I almost copy its right code but it just doesn't show the dropdown content on this website. Can someone help me explain it? Thx!

html:

</div>  
   <div class="icon">
     <p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"
     ></i> Cart</p> 
       <div class="dropdown" id="drop">
         <p>Your shopping cart is empty</p>
         <a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
       </div>      
   </div>

The above is the html code. The cart is in the icon class. I create a cart div and a dropdown div. When the cart is be clicked, the dropdown block should appear.

JS:

  <script>
     function myFunction()
     {
        document.getElementById("drop").classList.toggle("show");
     }
   </script>    

CSS:

div.icon
{
    top:25px;
    position:absolute;
    right:20px;
    float:left;
    display:inline-block;

}
div.dropdown
{

    position: absolute;
    background-color:#F1F1F1;
    min-width: 160px;
    z-index: 1;
    height:215px;
    width:400px;
    text-align:center;
    top:30px;
    right:-6px;

}

.dropdown a
{
    text-decoration:none;
    color:black;
    background-color:#E9E9E9;
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    padding:13px 0 13px 0;
    font-size:11px;
}

.dropdown p
{
    position:absolute;
    top:100px;
    width:100%;
    font-size:13.4px;
}
.icon .dropdown::after
{
    content: "";
    position: absolute;
    bottom: 100%;
    right: 7%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #F1F1F1; transparent;
}

.show
{
    display:block;
}