如何制作符合标准的Div CSS弹出菜单？

在HTML和CSS中，你可以创建一个符合标准的弹出菜单。你需要一个div元素作为菜单的容器，然后使用CSS来控制它的样式和行为。你可以设置菜单的宽度、高度、背景颜色、边框等。你还可以添加一些交互效果，如鼠标悬停时改变背景颜色或显示子菜单。

在网页设计中，弹出菜单（也被称为下拉菜单）是一种常见的用户界面元素，用于节省空间并提供快速导航，使用DIV和CSS制作弹出菜单是前端开发中的常见实践，下面将详细介绍如何用标准的HTML、CSS和简单的JavaScript来创建一个功能完善的弹出菜单。

（图片来源网络，侵删）

第一步：设置HTML结构

我们需要创建HTML的基本结构，一个典型的弹出菜单通常包括一个主菜单项和一个或多个子菜单项。

<div class="menu">
  <div class="menuitem">Menu Item 1
    <div class="submenu">
      <a href="#">Sub Item 1</a>
      <a href="#">Sub Item 2</a>
      <a href="#">Sub Item 3</a>
    </div>
  </div>
  <div class="menuitem">Menu Item 2
    <div class="submenu">
      <a href="#">Sub Item A</a>
      <a href="#">Sub Item B</a>
    </div>
  </div>
</div>

第二步：编写CSS样式

我们通过CSS来控制菜单的外观和行为，这包括隐藏子菜单项，以及当鼠标悬停时显示它们。

.menu .submenu {
  display: none;
  position: absolute;
  backgroundcolor: #f9f9f9;
  minwidth: 160px;
  boxshadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  zindex: 1;
}
.menu .submenu a {
  color: black;
  padding: 12px 16px;
  textdecoration: none;
  display: block;
}
.menuitem:hover .submenu {
  display: block;
}
.menuitem {
  position: relative;
  display: inlineblock;
}

第三步：添加JavaScript交互

虽然上述代码已经实现了基本的弹出菜单功能，但为了更好的用户体验，我们可以通过JavaScript来增加一些动态效果。

document.querySelectorAll('.menuitem').forEach(function(elem) {
  elem.addEventListener('mouseover', function() {
    this.querySelector('.submenu').style.display = 'block';
  });
  elem.addEventListener('mouseout', function() {
    this.querySelector('.submenu').style.display = 'none';
  });
});

这段JavaScript代码为每个菜单项添加了mouseover和mouseout事件监听器，使得当鼠标移动到菜单项上时，对应的子菜单会显示出来；当鼠标移出时，子菜单会隐藏。

（图片来源网络，侵删）

第四步：响应式设计考虑

对于移动设备，由于屏幕尺寸的限制，常常需要调整菜单的展示方式，我们可以利用媒体查询来为小屏幕设备优化菜单。

@media screen and (maxwidth: 600px) {
  .menu .submenu {
    display: none; //默认情况下不显示子菜单
    position: static; //位置改为静态，避免绝对定位带来的问题
    ...
  }
  
  .menuitem:hover .submenu {
    display: none; //悬停时也不显示子菜单
  }
}

可以为移动设备提供一个汉堡菜单图标，点击后以垂直列表的形式展示所有菜单项。

第五步：测试与优化

完成以上步骤后，不要忘记在各种设备和浏览器上进行测试，以确保菜单在所有环境下都能正常工作，根据测试结果进行相应的优化，比如调整样式、修复布局问题等。