css下拉菜单自动缩回 |网页制作html css

/* CSS 代码 */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtn:hover {
background-color: #3e8e41;
cursor: pointer;
}

以上是一个简单的 CSS 下拉菜单样式，它在 hover 时显示菜单。但是，如果用户在下拉菜单之外点击或者切换页面，下拉菜单应该自动缩回，否则会对用户造成不便。

要让下拉菜单自动缩回，大家需要增加一段 JavaScript 代码。具体而言，大家在全局监听点击事件，如果点击了下拉菜单之外的地方，大家就让下拉菜单缩回即可。

/* JavaScript 代码 */
document.addEventListener("click", function(event) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i< dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (event.target.closest(".dropdown") != dropdowns[i].previousSibling) {
openDropdown.style.display = "none";
}
}
});

如上 JavaScript 代码，大家使用了事件代理来监听全局点击事件，然后检查点击目标是否在下拉菜单之外。如果在之外，大家就让该下拉菜单缩回，否则不做处理。

通过增加以上 JavaScript 代码，大家就能让下拉菜单自动缩回了。这样，用户能够更加便捷地使用下拉菜单，提升了网站的用户体验。