基础 CSS 菜单 垂直菜单

本文介绍如何使用 CSS 制作基础的垂直菜单。该菜单可以用于网站的导航栏或侧边栏，使得网站更加易于操作。

HTML 代码

首先，我们需要编写 HTML 代码，定义菜单的结构。以下是一个简单的菜单 HTML 结构：

<div class="menu">
  <ul>
    <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>

其中，<div> 元素是用来包裹整个菜单的，<ul> 元素是用来定义菜单的列表，而 <li> 元素则是每个菜单项，<a> 元素是菜单项所指向的链接。请根据实际情况修改链接和菜单项的文本。

CSS 代码

接下来，我们要使用 CSS 来美化菜单的样式。以下是一个基本的菜单样式：

.menu {
  display: inline-block;
  border: 1px solid #999;
  border-radius: 5px;
}

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

.menu li {
  display: block;
  border-bottom: 1px solid #999;
}

.menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

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

这里定义了菜单的边框、边框圆角、背景色等样式，让菜单看起来更加美观。注意要给菜单项的边框和链接添加样式，让它们看起来更加整洁。hover 时菜单项背景色改变，提供更好的用户体验。

结束语

通过本文的介绍，你已经学习了如何使用 CSS 制作一个基础的垂直菜单。当然了，这只是一个起点，你可以根据需求对菜单进行更复杂的美化和功能实现。