css制作菜单

CSS 制作菜单的方法

使用 CSS 可以制作多种风格的菜单，包括水平菜单、垂直菜单、下拉菜单等。以下是几种常见的实现方式。

水平菜单

水平菜单通常用于导航栏，可以通过 display: inline-block 或 flex 布局实现。

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

.nav-menu li {
  display: inline-block;
}

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

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

对应的 HTML 结构：

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

垂直菜单

垂直菜单适合侧边栏导航，可以通过默认的块级元素或 flex-direction: column 实现。

.vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
  background-color: #f1f1f1;
}

.vertical-menu li a {
  display: block;
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
}

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

对应的 HTML 结构：

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

下拉菜单

下拉菜单通常结合 CSS 的 :hover 伪类和 display 属性实现。

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

对应的 HTML 结构：

<div class="dropdown">
  <button>菜单</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
  </div>
</div>

响应式菜单

响应式菜单适合移动设备，通常结合媒体查询和 JavaScript 实现。

@media screen and (max-width: 600px) {
  .nav-menu li {
    display: block;
    width: 100%;
  }
}

通过以上方法，可以灵活实现不同风格的菜单效果。