CSS 导航菜单是很常见的网页元素之一。通常,当我们将鼠标悬停在导航菜单上时,一个下拉菜单会从中心弹出。但是,如果你想将下拉菜单隐藏起来,该怎么办呢?
HTML 代码: <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#">Services ></a> <ul class="dropdown-menu"> <li><a href="#">Web Design</a></li> <li><a href="#">SEO</a></li> <li><a href="#">Social Media</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> CSS 代码: .dropdown-menu { display: none; /*隐藏下拉菜单*/ } .dropdown:hover .dropdown-menu { display: block; /*悬停时显示下拉菜单*/ }
在这个例子中,我们先将下拉菜单的显示设置为隐藏。当鼠标移动到包含下拉菜单的导航栏上时,我们使用伪类选择器 :hover
来更改样式,并将下拉菜单的显示设置为块级元素。
现在,我们已经成功地将下拉菜单隐藏起来,只有当用户将鼠标悬停在导航菜单上时才会显示它们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。