在CSS中创建下拉菜单通常使用以下两种常见的方法：
1. 使用CSS伪类和嵌套列表（Nested List）：
HTML结构：
〓〓html代码如下：〓〓
<ul class="dropdown">
<li>
<a href="#">Menu 1</a>
<ul class="submenu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul class="submenu">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
</ul>
CSS样式：
〓〓css代码如下：〓〓
.dropdown ul {
display: none;
}
.dropdown li:hover > ul {
display: block;
}
上面给出的代码通过利用 display: none; 将子菜单隐藏，然后使用 li:hover > ul 选择器在鼠标悬停时显示子菜单。
2. 使用CSS伪类和绝对定位：
HTML结构：
〓〓html代码如下：〓〓
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
CSS样式：
〓〓css代码如下：〓〓
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
上面给出的代码通过将子菜单使用 display: none; 隐藏，并在鼠标悬停时使用 .dropdown:hover .dropdown-content 选择器来显示子菜单。
这些示例只是演示下拉菜单的基本原理。你可以根据需要进行样式调整和扩展，以满足具体设计要求和个人偏好。