css中如何制作下拉菜单 |css 盒模型

“`html

<div class=”而下拉菜单”>

<div class=”下拉菜单项”>

<h2><a href=”#”>项1</a></h2>

<ul>

<li><a href=”#”>项1.1</a></li>

<li><a href=”#”>项1.2</a></li>

<li><a href=”#”>项1.3</a></li>

</ul>

</div>

<div class=”下拉菜单项”>

<h2><a href=”#”>项2</a></h2>

<ul>

<li><a href=”#”>项2.1</a></li>

<li><a href=”#”>项2.2</a></li>

<li><a href=”#”>项2.3</a></li>

</ul>

</div>

</div>

在 CSS 中，大家可以使用类名来定义下拉菜单项的样式。例如，大家可以使用 `而下拉菜单` 类名来定义整个下拉菜单的样式，并使用 `下拉菜单项` 类名来定义下拉菜单项的样式。

例如，大家可以使用以下 CSS 样式来美化下拉菜单项：

“`css

.而下拉菜单 {

background-color: #F7F7F7;

border: none;

padding: 10px;

width: 200px;

.而下拉菜单项 {

background-color: #FFFFFF;

border: 1px solid #C6C6C6;

padding: 10px;

width: 100px;

.而下拉菜单项 h2 {

font-size: 24px;

margin: 0;

padding: 0;

text-align: center;

.而下拉菜单项 a {

color: #007Bff;

text-decoration: none;

display: block;

margin-bottom: 5px;

通过使用 CSS 样式，大家可以轻松地创建出漂亮的下拉菜单。