Menu Preview on Navbar

I'm building a simple responsive dropdown menu for a simulated e-commerce website for fun. I currently have a navbar that has a list item to the far right which will detect when a user basically hovers over it using the onmouseenter listener i defined. I wish to build a basic dropdown menu, a simple block in css, that will display above all my other html and not disrupt the page.

I've attached what I believe is the essential code and some comments to explain what's going on. Please let me know what styling I would need, tutorials, or more typescript that I would need. Thank you.

page.html

<!-- inside of navbar, listener that invokes on mouse events through previewable id -->
 <!-- list the item that will be clicked on as an item inside the navbar -->
  <!-- hyperlink attached to listener that invokes on mouse events through cartable id -->

<div class="navbar-nav" id="previewable">
 <li class="nav-item">
  <a class="nav-link" routerLink="/cart" id="cartable">

<!-- the dropdown menu container -->
 <!-- the dropdown menu -->

<div class="dropdown-cart-containter">
 <div class="dropdown-cart">

page.ts

/* attach event listeners that will respond when the mouse hovers over the html item */
ngOnInit(): void
 document.getElementById('cartable').addEventListener('mouseenter', this.onmouseenter, false);
ngOnDestroy(): void
 document.getElementById('cartable').removeEventListener('mouseenter', this.onmouseenter, false);

/* definition for onmouseenter that is attached to listener */
onmouseenter = (): void => {
 const cartElement = document.getElementById('cartable');
 const previewElement = document.getElementById('previewable');
 previewElement.classList.add('dropdown-cart-containter');
 previewElement.classList.add('dropdown-cart');
}

page.css

/* shopping cart on mouse enter preview */

.dropdown-cart-containter {
  background-color: blueviolet;
}
.dropdown-cart {
  background-color: red;
}

codepen https://codepen.io/evolandlupiz/pen/KKKYKrY

from Menu Preview on Navbar