当前位置：首页 > CSS

css div 制作导航菜单

2026-01-08 17:24:15CSS

基本导航菜单结构

使用HTML创建一个简单的导航菜单结构，通常使用<ul>和li>列表实现。每个菜单项用<a>标签包裹以实现链接功能。

<div class="nav-menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</div>

清除默认样式并设置基础布局

清除<ul>和<li>的默认样式，设置水平排列。通过display: flex实现菜单项横向排列，并移除列表标记。

css div 制作导航菜单

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

.nav-menu li {
  margin: 0;
}

设置菜单项样式

为<a>标签添加内边距、颜色和悬停效果。通过text-decoration: none移除下划线，并设置过渡效果增强交互体验。

.nav-menu a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

.nav-menu a:hover {
  background-color: #555;
}

响应式设计（可选）

通过媒体查询实现移动端适配。当屏幕宽度小于特定值时，将菜单改为垂直排列。

css div 制作导航菜单

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

添加活动状态指示

为当前页面菜单项添加高亮样式。通过.active类或JavaScript动态标记当前选中项。

.nav-menu a.active {
  background-color: #4CAF50;
}

下拉菜单实现（进阶）

通过嵌套<ul>和CSS伪类实现下拉菜单功能。父菜单项需设置position: relative，下拉内容使用position: absolute定位。

<li class="dropdown">
  <a href="#">产品</a>
  <ul class="dropdown-content">
    <li><a href="#">产品A</a></li>
    <li><a href="#">产品B</a></li>
  </ul>
</li>

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
  display: block;
}