`和`
<div class="dropdown">
<button class="dropdown-toggle">选择一项</button>
<ul class="dropdown-menu">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
</ul>
</div>
CSS样式设计
接下来，我们为这个下拉菜单添加样式，让它看起来更加专业和美观。
通过设置背景颜色、边框、悬停效果等，可以让下拉菜单在视觉上更有层次感。
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
padding: 10px 15px;
background-color: #ecf0f1;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
min-width: 150px;
z-index: 1000;
}
.dropdown-menu li {
list-style: none;
}
.dropdown-menu li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
.dropdown-menu li a:hover {
background-color: #f0f0f0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
响应式设计优化
为了让下拉菜单在移动端也能正常显示，我们需要做一些响应式调整。
比如，使用媒体查询来改变布局，确保在小屏幕上依然保持良好的可操作性。
@media (max-width: 600px) {
.dropdown-toggle {
width: 100%;
}
.dropdown-menu {
position: static;
display: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
}
总结
下拉菜单样式虽然看似简单，但其背后涉及的知识点非常多，包括HTML结构、CSS样式、响应式设计以及交互逻辑。
掌握了这些内容，你就能轻松打造一个既美观又实用的下拉菜单。
如果你对前端开发感兴趣，不妨动手试试，自己写一个下拉菜单吧！
立即开始实践