微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css导航隐藏下拉菜单

CSS 导航菜单是很常见的网页元素之一。通常,当我们将鼠标悬停在导航菜单上时,一个下拉菜单会从中心弹出。但是,如果你想将下拉菜单隐藏起来,该怎么办呢?

css导航隐藏下拉菜单

下面是一个使用 CSS 实现隐藏导航菜单的例子:

HTML 代码:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="dropdown">
      <a href="#">Services &gt;</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 举报,一经查实,本站将立刻删除。