const notificationMenu = document.getElementById("notification-menu"); const notificationBell = document.getElementById("noti-bell"); notificationBell.addEventListener("click", function() { if (notificationMenu.style.display = 'none') { notificationMenu.style.display = 'block' } else { notificationMenu.style.display = 'none' } });

 .notification-menu { display: flex; flex-direction: column; justify-content: space-around; text-align: center; position: absolute; height: 250px; width: 350px; left: 58vw; bottom: 66vh; background-color: white; border: solid 2px #686de0; z-index: 1; font-size: 14px; display: none; }

 <span class="noti-bell" id="noti-bell"><i class="fa-solid fa-bell"></i></span> <div id="notification-menu" class="notification-menu"> <span class="noti-menu-header">Notifications<a href="#" class="read notifications">Mark all as read</a></span> <ul> <li><a href="#"><span>You Have 1 New Task!</span></a></li> <li><a href="#"><span>You Have 1 New Reminder!</span></a></li> <li><a href="#"><span>You Have 1 New Note!</span></a></li> <li><a href="#">You Have 2 New Events!</a></li> <a href="#"><span class="clear-notifications">Clear Notifications</span></a> </ul> </div>