首先使用语义化HTML构建导航结构，接着用CSS设置水平或垂直布局，然后添加悬停效果提升交互体验，最后通过媒体查询实现移动端响应式适配。

在HTML中实现导航菜单并不复杂，关键在于结构清晰、语义正确，并结合CSS进行样式美化。以下是具体实现步骤。

1. 使用语义化HTML构建导航结构

使用

标签定义页面的导航区域，这是HTML5推荐的语义化标签，有助于搜索引擎和辅助工具识别导航内容。

导航菜单通常由无序列表（

）构成，每个菜单项用列表项（

）包裹，链接使用 标签。

  

    
• 首页

    
• 关于我们

    
• 服务

    
• 联系

  

2. 使用CSS设置水平或垂直布局

默认情况下，

是块级元素，会垂直排列。要实现水平导航栏，需将列表项设为内联或使用 Flex 布局。

立即学习“前端免费学习笔记（深入）”；

推荐使用 Flex 布局，灵活且响应式友好。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-family: Arial, sans-serif;
}

3. 添加悬停效果和交互样式

提升用户体验，可以通过CSS为链接添加鼠标悬停效果。

例如改变颜色、添加下划线或背景色。

nav a:hover {
  color: #007BFF;
  border-bottom: 2px solid #007BFF;
}

4. 适配移动端（响应式设计）

在小屏幕上，水平菜单可能显示不全。可以使用媒体查询调整布局，或将菜单折叠为汉堡按钮。

简单做法：在小屏上改为垂直堆叠。

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
  nav li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

基本上就这些。从语义结构到样式布局，再到响应式处理，一个完整的HTML导航菜单就实现了。不复杂但容易忽略细节。