如何使用下拉菜单固定页眉？

<header>
  <ul class="dropdown-menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</header>

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f1f1f1;
}

.dropdown-menu {
  display: none;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}

.dropdown-menu li {
  margin-bottom: 5px;
}

.dropdown-menu li a {
  color: #333;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  color: #000;
}

const dropdownMenu = document.querySelector('.dropdown-menu');
const header = document.querySelector('header');

header.addEventListener('mouseenter', function() {
  dropdownMenu.style.display = 'block';
});

header.addEventListener('mouseleave', function() {
  dropdownMenu.style.display = 'none';
});