悬停菜单在悬停时上移

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

.menu {
  position: relative;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
}

.menu li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

.menu li a:hover {
  background-color: #f0f0f0;
}

var menu = document.querySelector('.menu');

menu.addEventListener('mouseover', function() {
  menu.style.top = '-10px'; // 向上移动10像素
});

menu.addEventListener('mouseout', function() {
  menu.style.top = '0'; // 恢复原来的位置
});