使用CSS实现弹出式菜单可以通过以下步骤完成：
首先，在HTML中创建一个具有弹出式菜单的基本结构。可以使用无序列表（ul）和列表项（li）来创建菜单选项。例如：
<h3>菜单</h3>
<ul class="menu">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>使用CSS样式表设置菜单的样式，例如设置菜单项的背景颜色，边框和文本样式。可以使用伪类（:hover）来添加鼠标悬停效果。例如：
.menu {
list-style: none;
padding: 0;
margin: 0;
background-color: #eee;
border: 1px solid #ccc;
display: none;
}
.menu li {
padding: 10px;
cursor: pointer;
}
.menu li:hover {
background-color: #ccc;
}使用JavaScript事件来控制菜单的显示和隐藏。可以使用addEventListener方法来添加单击事件，并在事件处理程序中切换菜单的显示状态。例如：
const menu = document.querySelector('.menu');
const menuButton = document.querySelector('h3');
menuButton.addEventListener('click', function() {
if (menu.style.display === 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
});<h3>菜单</h3>
<ul class="menu">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<style>
.menu {
list-style: none;
padding: 0;
margin: 0;
background-color: #eee;
border: 1px solid #ccc;
display: none;
}
.menu li {
padding: 10px;
cursor: pointer;
}
.menu li:hover {
background-color: #ccc;
}
</style>
<script>
const menu = document.querySelector('.menu');
const menuButton = document.querySelector('h3');
menuButton.addEventListener('click', function() {
if (menu.style.display === 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
});
</script>通过以上步骤，就可以实现一个简单的弹出式菜单。