[分享]css3实现点击下拉菜单和

CSS3是一种用来实现网页样式效果的技术，它提供了很多新的特性使得我们能够创造出更加美观和功能丰富的网站。其中，点击下拉菜单是一个很有用的功能，本文将介绍如何使用CSS3实现点击下拉菜单的效果。 /H...

CSS3是一种用来实现网页样式效果的技术，它提供了很多新的特性使得我们能够创造出更加美观和功能丰富的网站。其中，点击下拉菜单是一个很有用的功能，本文将介绍如何使用CSS3实现点击下拉菜单的效果。

/*HTML结构*/
<div class="dropdown-menu">
    <button>下拉菜单</button>
    <ul class="menu-list">
        <li><a href="#">选项1</a></li>
        <li><a href="#">选项2</a></li>
        <li><a href="#">选项3</a></li>
    </ul>
</div>

/*CSS样式*/
.dropdown-menu button {
    background-color: #ffffff;
    border: none;
    color: #333333;
    font-size: 16px;
    padding: 10px;
    width: 150px;
    cursor: pointer;
}
.dropdown-menu .menu-list {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 150px;
    z-index: 1;
}
.dropdown-menu .menu-list li {
    border-bottom: 1px solid #cccccc;
}
.dropdown-menu .menu-list li a {
    color: #333333;
    display: block;
    padding: 10px;
    text-decoration: none;
}
.dropdown-menu .menu-list li a:hover {
    background-color: #f3f3f3;
}

/*使用JS为下拉菜单按钮添加事件*/
const dropdownBtn = document.querySelector('.dropdown-menu button')
const menuList = document.querySelector('.dropdown-menu .menu-list')
dropdownBtn.addEventListener('click', function() {
    if (menuList.style.display === 'none') {
        menuList.style.display = 'block'
    } else {
        menuList.style.display = 'none'
    }
}) 

以上是实现点击下拉菜单效果的CSS和JS代码，HTML结构中的标签是下拉菜单的按钮，下面的标签是菜单列表。CSS样式中使用了position:absolute将菜单列表设置为绝对定位，z-index:1将它放在顶层，然后设置display:none隐藏它。在JS代码中，用addEventListener为按钮添加了一个click事件，根据菜单列表的display属性来判断是否要显示或隐藏它。