CSS 可以这样写：

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  padding: 0 20px;
}

.menu-btn {
  display: none;
  margin-right: 20px;
  padding: 8px 12px;
}

@media (max-width: 768px) {
  .nav-container {
    flex-wrap: wrap;
  }

  .menu-btn {
    display: block;
  }

  .nav-list {
    display: none;
    width: 100%;
    flex-direction: column;
  }

  .nav-list.show {
    display: flex;
  }

  .nav-item {
    width: 100%;
  }

  .nav-item a,
  .dropdown-toggle {
    width: 100%;
    text-align: left;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    background-color: #f9fafb;
  }

  .dropdown-menu li a {
    color: #333333;
    padding-left: 36px;
  }
}

再添加 JavaScript：

这样，当屏幕宽度小于 768px 时，导航栏会折叠起来，用户点击“菜单”按钮后再展开。对于移动端来说，这种设计更节省空间，也更加符合用户操作习惯。

七、多级下拉菜单怎么做

有些网站栏目层级比较深，例如“产品中心”下面还有“软件产品”“硬件产品”，每个分类下又有具体产品。此时就需要多级下拉菜单。

HTML 示例：

  产品中心
  

    
网站建设

    

      软件开发
      

        
ERP系统
        
CRM系统
        
OA办公系统
      
    

    
APP开发
  

CSS 示例：

.submenu {
  position: relative;
}

.submenu-menu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 180px;
  list-style: none;
  background-color: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
  display: none;
}

.submenu:hover .submenu-menu {
  display: block;
}

多级菜单要注意一个问题：如果菜单层级过多，会增加用户理解成本，也容易在移动端出现操作困难。因此，除非确实有必要，一般建议导航菜单不要超过三级。

八、下拉导航栏的设计要点

一个好的下拉导航栏，不只是能展开，还应该在体验和视觉上做到合理。以下几点非常重要。

1. 菜单层级要清晰

导航栏的核心作用是帮助用户快速找到内容。如果一级菜单、二级菜单分类混乱，用户反而会更难使用。因此在制作下拉导航栏前，应该先规划网站栏目结构。

例如：

• 首页
• 产品中心
  • 产品 A
  • 产品 B
  • 产品 C
• 解决方案
  • 行业方案
  • 企业方案
• 新闻资讯
  • 公司新闻
  • 行业动态
• 关于我们
• 联系我们

这样结构清楚，用户一眼就能理解。

2. 下拉菜单不要过宽或过窄

如果菜单太窄，文字可能换行，影响阅读；如果太宽，又会显得笨重。一般普通下拉菜单宽度可以设置在 160px 到 240px 之间。如果是大型电商网站或门户网站，也可以设计成 Mega Menu，也就是大面积的超级菜单。

3. 注意层级遮挡问题

下拉菜单通常使用 position: absolute 定位。如果页面中有轮播图、视频或其他元素，可能会出现下拉菜单被遮挡的问题。此时可以给下拉菜单设置较高的 z-index：

.dropdown-menu {
  z-index: 9999;
}

但要注意，z-index 只有在元素具有定位属性时才会生效，例如：

position: absolute;
position: relative;
position: fixed;

4. 增加过渡动画

适当的动画可以让交互更自然，但动画不要过慢。一般来说，导航下拉动画控制在 0.2s 到 0.3s 之间比较合适。

5. 移动端使用点击，不依赖 hover

手机没有鼠标悬停，因此移动端菜单应使用点击展开。不要只依赖 :hover，否则用户可能无法正常打开二级菜单。

九、常见问题及解决方法

问题一：下拉菜单显示不出来

可能原因：

1. CSS 选择器写错；
2. 下拉菜单被设置为 display: none，但没有正确切换；
3. 父元素没有 position: relative；
4. 下拉菜单被其他元素遮挡；
5. JavaScript 没有正确绑定事件。

解决方式：

.nav-item {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  z-index: 999;
}

并检查 HTML 类名和 CSS 类名是否一致。

问题二：鼠标移到下拉菜单时菜单消失

这种情况通常是因为下拉菜单和一级菜单之间有空隙。当鼠标经过空隙时，:hover 状态消失，菜单就隐藏了。

解决方法是让下拉菜单紧贴一级菜单：

.dropdown-menu {
  top: 100%;
}

同时不要给下拉菜单设置额外的上边距。如果确实需要视觉间距，可以使用内边距或伪元素处理。

问题三：下拉菜单被轮播图盖住

给导航栏或下拉菜单设置更高的层级：

.navbar {
  position: relative;
  z-index: 9999;
}

问题四：移动端点击菜单后无法关闭

可以通过监听页面点击事件关闭菜单：

document.addEventListener("click", function () {
  document.querySelectorAll(".dropdown").forEach(function (item) {
    item.classList.remove("active");
  });
});

同时在点击菜单按钮时阻止事件冒泡：

event.stopPropagation();

十、完整示例代码

下面给出一个可直接运行的完整版本，包含 HTML、CSS 和 JavaScript。

十一、总结

网页下拉导航栏的制作并不复杂，核心思路可以概括为三步：

1. 使用 HTML 搭建菜单层级结构；
2. 使用 CSS 控制布局、隐藏、显示和动画效果；
3. 根据需要使用 JavaScript 实现点击展开、移动端适配和关闭逻辑。

如果只是做一个简单的电脑端网站，可以使用纯 CSS 的 :hover 实现下拉效果；如果需要兼容手机端，建议加入 JavaScript 点击交互；如果网站栏目较多，还可以扩展为多级菜单或超级菜单。

在实际项目中，除了功能实现，还要重视用户体验。菜单层级不要过深，文字要简洁明确，点击区域要足够大，移动端操作要方便。同时，注意 z-index、定位、动画和响应式布局等细节，才能做出一个既美观又实用的网页下拉导航栏。