側拉菜單(side menu)是一種常見的Web設計元素，通常用于導航欄或側邊欄，可以讓用戶快速訪問不同的頁面或子頁面。本文將介紹如何使用純CSS實現側拉菜單。

1. 定義側拉菜單的樣式

首先，我們需要定義側拉菜單的樣式?？梢允褂肏TML中的<ul>和<li>標簽來創建側拉菜單，并使用CSS來定義側拉菜單的外觀和功能。

例如，我們可以使用以下樣式來定義一個簡單的側拉菜單：

```css

list-style-type: none;

margin: 0;

padding: 0;

display: inline-block;

width: 100%;

text-align: center;

margin-right: 20px;

li:last-child {

margin-right: 0;

上述樣式定義了側拉菜單的基本樣式，包括無邊框、居中對齊、右側margin等。我們還為每個側拉菜單項添加了一個<li>標簽，并設置了其寬度為100%，使其保持整體寬度一致，同時使用text-align: center來使其居中。

2. 添加子菜單項

接下來，我們可以使用HTML中的<li>標簽創建子菜單項，并使用CSS來定義它們的外觀和功能。例如，我們可以使用以下樣式來添加一個子菜單項：

```css

li:nth-child(2) {

background-color: #e8e8e8;

color: #fff;

li:nth-child(3) {

background-color: #d3d3d3;

color: #fff;

上述樣式定義了第二個和第三個側拉菜單項的背景顏色和文本顏色，并將它們設置了不同的樣式。

```css

display: block;

text-align: center;

margin-right: 20px;

color: #fff;

text-decoration: none;

a:hover {

background-color: #c3c3c3;