菜单制作css

菜单制作 CSS

基本结构

HTML 结构通常使用 <ul> 和 <li> 标签构建菜单，CSS 负责样式设计。以下是一个简单的横向菜单结构：

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

横向菜单样式

通过 CSS 将列表项水平排列，并添加悬停效果：

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

.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #111;
}

纵向菜单样式

调整 flex-direction 为垂直排列：

.menu {
  flex-direction: column;
  width: 200px;
}

.menu li a {
  text-align: left;
  border-bottom: 1px solid #444;
}

下拉菜单实现

通过嵌套列表和 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 {
  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;
}

响应式菜单

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

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

  .dropdown-content {
    position: static;
  }
}

动画效果

为菜单项添加过渡动画：

.menu li a {
  transition: background-color 0.3s ease;
}

.dropdown-content {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}