如何制作css导航菜单

创建基本HTML结构

使用<ul>和<li>标签构建导航菜单的骨架，<a>标签定义菜单项链接。

<nav>
  <ul class="navbar">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

重置默认样式

清除列表的默认边距和项目符号，设置display: flex实现横向排列。

.navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

设计菜单项样式

为链接添加内边距、颜色和悬停效果，使用text-decoration: none去除下划线。

.navbar li a {
  display: block;
  color: white;
  padding: 15px 20px;
  text-decoration: none;
}
.navbar li a:hover {
  background-color: #555;
}

添加响应式设计

通过媒体查询调整小屏幕下的布局，改为垂直排列。

@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
  }
}

实现下拉菜单（可选）

嵌套<ul>创建子菜单，通过CSS控制显示与隐藏。

<li class="dropdown">
  <a href="#">更多</a>
  <ul class="dropdown-content">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
  </ul>
</li>

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #444;
}
.dropdown:hover .dropdown-content {
  display: block;
}

优化交互效果

添加过渡动画或活动状态指示器，提升用户体验。

.navbar li a {
  transition: background-color 0.3s;
}
.active {
  background-color: #4CAF50;
}