基础 CSS 垂直下拉菜单

在网站页面中，垂直下拉菜单经常被用来提供网站导航和指引用户。

本文将介绍如何制作基础的垂直下拉菜单，使用 CSS 来美化菜单项。

HTML 结构

首先，我们需要在 HTML 中创建出我们的垂直下拉菜单。

一个简单的垂直下拉菜单的 HTML 结构可以如下所示：

<div class="menu-container">
  <ul class="nav-menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
    <li><a href="#">菜单项5</a></li>
  </ul>
</div>

这个 HTML 结构包含一个外层容器，用于对菜单进行布局（这里我们使用了 menu-container 进行命名），以及一个内层的菜单列表（使用 nav-menu 进行命名），其中包含了若干个菜单项。

CSS 样式

在 HTML 结构中，我们的下拉菜单还是一个普通的无序列表，我们需要通过 CSS 来添加一些样式来实现下拉菜单的效果。

.menu-container {
  position: relative;
  display: inline-block;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  display: block;
  position: relative;
  float: left;
  padding: 10px;
  margin-right: 20px;
}

.nav-menu li:hover > ul {
  display: block;
}

.nav-menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}

.nav-menu ul li {
  width: 200px;
  float: none;
  display: list-item;
  position: relative;
  margin: 0;
  padding: 0;
}

.nav-menu ul a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #333;
  text-decoration: none;
}

上面的 CSS 样式中，我们做了如下处理：

1. .menu-container 用于定位菜单容器，我们使用了 position: relative 来设置，这样是为了让下拉菜单面板可以使用 position: absolute 来进行定位。
2. .nav-menu 用于定位菜单列表，我们设置了 list-style: none 来隐藏列表符号，margin: 0; padding:0; 来去掉默认的内外边距。
3. .nav-menu li 用于设置列表项样式，我们使用 float: left; 来让菜单项横向排列，并添加了一定的 padding 和 margin-right。
4. .nav-menu li:hover > ul 用于在鼠标移动到菜单项上时，显示下拉菜单面板。
5. .nav-menu ul 用于设置下拉菜单面板的样式，我们设置了 display: none; 来让面板默认是不可见的，并且使用了 position: absolute; top: 100%; left: 0; 来将面板相对于菜单项进行定位。
6. .nav-menu ul li 用于设置下拉菜单面板中的列表项样式，这里我们取消了 float 属性，并添加了一定的 width 和 position。
7. .nav-menu ul a 用于设置下拉菜单面板中的链接样式，我们设置了 display: block; 来让链接全屏显示，并添加了 padding 和颜色。

结语

上面的代码片段是一个基础的 CSS 垂直下拉菜单实现方法，通过对 HTML 结构的定义和对 CSS 样式的设置，实现了一个简单的下拉菜单效果。

为了实现更好的效果，你还可以对这个代码片段进行扩展，比如添加动画效果、美化菜单样式、嵌入 JavaScript 等等。