css制作导航文本

基础导航栏结构

使用HTML的<nav>和<ul>标签构建导航框架，列表项<li>包含链接<a>：

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

清除默认样式

重置列表和链接的默认样式：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  text-decoration: none;
  color: inherit;
}

水平导航布局

使用Flexbox实现水平排列：

nav ul {
  display: flex;
  gap: 20px; /* 项目间距 */
}
nav li {
  padding: 10px 15px;
}

悬停效果

添加交互状态样式：

nav a:hover {
  color: #3498db;
  border-bottom: 2px solid #3498db;
}

响应式设计

通过媒体查询适配移动端：

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 10px;
  }
}

激活状态指示

为当前页面添加高亮标识：

nav a.active {
  font-weight: bold;
  color: #e74c3c;
}

高级效果示例

下拉菜单实现：

nav li {
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
nav li:hover > ul {
  display: block;
}