类似新浪微博的下拉菜单的前端代码 1.导航栏里面的li 都要有鼠标经过效果，所以需要循环注册鼠标事件 2.核心原理： 当鼠标经过li 里面的 第二个孩子 ul 显示， 当鼠标离开，则ul 隐藏

下面是一个简单的实现，你需要在 HTML 中添加一个导航栏，包含多个 li 标签，每个 li 标签包含一个链接和一个 ul 标签，ul 标签中包含多个 li 标签。然后在 JavaScript 中添加以下代码：

// 获取所有的 li 标签
const navList = document.querySelectorAll('.navbar li');

// 循环遍历每个 li 标签，注册鼠标事件
navList.forEach((li) => {
  // 当鼠标经过 li 标签时，显示其子元素 ul 标签
  li.addEventListener('mouseover', () => {
    const ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'block';
    }
  });

  // 当鼠标离开 li 标签时，隐藏其子元素 ul 标签
  li.addEventListener('mouseout', () => {
    const ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'none';
    }
  });
});

在 CSS 中，你可以将 ul 标签的默认样式设置为隐藏：

.navbar ul {
  display: none;
}

这样，当页面加载时，所有的 ul 标签都会被隐藏起来。然后通过 JavaScript 中的鼠标事件，来控制其显示和隐藏。