制作css导航栏实验

创建基础HTML结构

使用<nav>标签包裹导航栏内容，内部用<ul>和<li>列表组织导航项。示例代码：

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

设置CSS基础样式

清除默认列表样式并设置水平排列：

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

nav li {
  padding: 15px 20px;
}

nav a {
  color: white;
  text-decoration: none;
}

添加悬停效果

通过:hover伪类增强交互性：

nav a:hover {
  background-color: #111;
  transition: background-color 0.3s ease;
}

实现响应式设计

使用媒体查询适配移动设备：

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }
  nav li {
    text-align: center;
    padding: 10px;
  }
}

添加下拉菜单（可选）

通过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;
}