css - 将鼠标悬停在一级菜单项上时，使二级纯 CSS 下拉菜单出现-6ren

css - 将鼠标悬停在一级菜单项上时，使二级纯 CSS 下拉菜单出现

转载作者：太空宇宙更新时间：2023-11-04 02:05:26

我使用纯 CSS 编码创建了一个导航栏，完全没有使用 JavaScript 编码。但是我在它的浏览器界面中遇到了一个问题。当我将鼠标悬停在第一级菜单项(也就是主菜单项的子菜单)上时，我想让我的第二级菜单项出现。但根据目前的情况，当我将鼠标悬停在名为“在线服务”的主菜单项上时，我可以看到一级菜单项“通讯”和相应的二级菜单项列表，称为“电子邮件”、“即时消息” ”和“社交网络”同时出现!

所以正如我上面所说，当主菜单项“在线服务”悬停时，我想隐藏二级菜单项。但是，我想让它只出现，当一级菜单项“通信”根据上面提到的当前情况悬停时。

这是我的 HTML 代码:

@charset "utf-8";
 #navMenu {
  margin: 0;
  padding: 0;
}
#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 35px;
}
#navMenu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background-color: #222;
}
#navMenu ul li a {
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  text-decoration: none;
  height: 40px;
  width: 170px;
  display: block;
  color: #fff;
  position: relative;
}
#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 40px;
}
#navMenu ul ul ul {
  position: absolute;
  visibility: hidden;
  display: inline-block;
  top: 0px;
  margin-left: 160px;
}
#navMenu ul li:hover ul {
  visibility: visible;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The Information Age</title>

  <link href="css/dropDown.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="wrapper">
    <div id="navMenu">
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Online Services</a>
          <ul>
            <li><a href="#">Communication</a>
              <ul>
                <li><a href="#">Email</a>
                </li>
                <li><a href="#">Instant Messaging</a>
                </li>
                <li><a href="#">Social Networking</a>
                </li>


              </ul>
              <!--inner 2nd UL-->

              <li><a href="#">Online Education</a>
              </li>
              <li><a href="#">Online Entertainment</a>
              </li>
              <li><a href="#">E-Commerce</a>
              </li>
              <li><a href="#">Web Storage</a>
              </li>





            </li>
            <!--inner LI-->
          </ul>
          <!--end inner UL-->




        </li>
        <!--end main LI-->
      </ul>
      <!--end main UL-->


    </div>
    <!--end navMenu-->
  </div>
  <!--end wrapper div-->






</body>

</html>

最佳答案

您需要在悬停时选择直接后代:

#navMenu ul li:hover > ul {
  visibility: visible;
}

这样它就不会选择，除非它是直接子元素，而不是所有子元素。

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM. ~ MDN

完整的演示如下:

@charset "utf-8";
 #navMenu {
  margin: 0;
  padding: 0;
}
#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 35px;
}
#navMenu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background-color: #222;
}
#navMenu ul li a {
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  text-decoration: none;
  height: 40px;
  width: 170px;
  display: block;
  color: #fff;
  position: relative;
}
#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 40px;
}
#navMenu ul ul ul {
  position: absolute;
  visibility: hidden;
  display: inline-block;
  top: 0px;
  margin-left: 160px;
}
#navMenu ul li:hover > ul {
  visibility: visible;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The Information Age</title>

  <link href="css/dropDown.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="wrapper">
    <div id="navMenu">
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Online Services</a>
          <ul>
            <li><a href="#">Communication</a>
              <ul>
                <li><a href="#">Email</a>
                </li>
                <li><a href="#">Instant Messaging</a>
                </li>
                <li><a href="#">Social Networking</a>
                </li>


              </ul>
              <!--inner 2nd UL-->

              <li><a href="#">Online Education</a>
              </li>
              <li><a href="#">Online Entertainment</a>
              </li>
              <li><a href="#">E-Commerce</a>
              </li>
              <li><a href="#">Web Storage</a>
              </li>





            </li>
            <!--inner LI-->
          </ul>
          <!--end inner UL-->




        </li>
        <!--end main LI-->
      </ul>
      <!--end main UL-->


    </div>
    <!--end navMenu-->
  </div>
  <!--end wrapper div-->






</body>

</html>

关于css - 将鼠标悬停在一级菜单项上时，使二级纯 CSS 下拉菜单出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40830694/

文章推荐： javascript - 带有谷歌地图的AWS服务器

文章推荐： javascript - 如何删除XML文件中的LF以接收一行xml文件？

c# - [纯] 函数可以抛出异常吗？
可以抛出异常的函数可以有[pure]属性吗？最佳答案根据 https://msdn.microsoft.com/en-us/library/system.diagnostics.contracts
纯 CSS 推送导航不会隐藏
我使用的是纯 css 推送导航。它工作得很好，但是我不知道如何在单击导航链接时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是，当单击链接并且站点跳转到某个部分时，我希望菜单自动滑入隐藏状
纯 CSS 下拉菜单项显示
我正在尝试让纯 CSS 下拉菜单正常工作。它在很大程度上确实有效，除了其他内容似乎显示出来但我不知道为什么。 http://jsfiddle.net/uQveP/4/ 有人可以告诉我我做错了什么吗？
纯 C 中的回调函数
这个问题在这里已经有了答案: What is a "callback" in C and how are they implemented? (9 个回答) 关闭 8 年前。我正在以这种方式实现回
html - 纯 HTML 后退按钮
我想在不使用 Javascript 或任何其他语言的情况下，使用 HTML 和 CSS 创建一个 Page Back Button。我想用纯 HTML 和 CSS 来完成。我进行了搜索，但每次代码中
prolog - 纯 Prolog 中的目标顺序
我对序言很陌生。据我所知，Pure Prolog 仅限于 Horn 子句。这是一个非常简单的序言程序 - % student( Snr , FirstName , LastName ,
html - 纯 CSS 加载指示器适合容器大小
我想在加载数据时对容器使用以下加载指示器。问题是， slider 具有固定的宽度和高度(300 像素和 300 像素)，但我希望它能够动态适应容器。当我尝试添加宽度时:140px；和高度:140px
html - 纯 css 滚动阴影
当内容超过可用宽度时，我需要启用滚动阴影。这是我试图用纯 css(没有 JS)来实现的。我遇到了很多文章，可以使用 css 多背景和背景附件来实现。如果内容是文本类型，则可以使用下面的 jsfilld
regex - 纯 Lua 中功能齐全的正则表达式库
我正在编写一个上古卷轴在线插件，它由一个名为 Havok Script 的轻微修改的 Lua 5.1 引擎支持。 .这个Lua环境不允许访问os , io , package , debug模块或任何
纯 C 语言的 Arduino
我自己尝试过将 Arduino 库编译成他们自己的独立库并链接到 Eclipse 中的一个项目，但在此过程中遇到了一些问题。是否有关于如何启动和运行的体面指南？我一直很难在网上找到一个真正有效的..
javascript - 从本地存储中仅删除选定的列表项 - 纯 JS
我在这里遇到了一些麻烦。我正在尝试使用本地存储创建一个待办事项列表，但我唯一要做的就是将列表项添加到本地存储并删除所有项目从本地存储中删除，但我无法从列表中删除单个 SELECTED 项目。有人可
html - 纯 CSS 响应式文字效果
我的问题很简单。考虑以下 CodePen .是否有可能仅使用 css 就可以获得相同的结果？换句话说，如果不使用 javascrip 如何做到这一点？非常感谢! Nachos are
angularjs - 纯 angularjs 滚动事件监听器
我正在使用没有 jquery 的 angularjs，并尝试创建滚动事件监听器。尝试过这种方法: $rootScope.$watch(function() { return $windo
javascript - 纯 WebGL 虚线
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题，也许我很笨，但我不知道如何让它发挥作用。我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
javascript - 纯 JavaScript 工具提示
我正在尝试用纯 JavaScript 制作工具提示，显示在 hover .就像 Stack Overflow 中将鼠标悬停在配置文件名称上的一个 div显示。我尝试使用 onmouseover ,
javascript - 纯 JavaScript 添加监听器到加载的新元素
我想要通过 AJAX 将监听器添加到新元素的想法: 例如，现在我有 hello world 我为每个添加了一个监听器，但是当我通过 AJAX 加载新元素时，它没有监听器；我不完全确定问题是什么。
javascript - 各种日期的动态倒计时时钟 - 纯 Javascript
如果我错误地提出了这个问题，或者之前已经有人问过并回答过这个问题，我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答，我正在寻找具有动态日期的纯 JavaScript 解决方
multithreading - 纯 Haskell 代码是否需要线程池？
在 Real World Haskell, Chapter 28, Software transactional memory ，开发了一个并发的网络链接检查器。它获取网页中的所有链接，并使用 HEA
javascript - 纯 JavaScript 将图像拖到浏览器
我正在尝试取消 jQuery-fy 一个聪明的 piece of code ，但有点太聪明了。目标是simple 。将图像从桌面拖动到浏览器。在这次 unjQueryfication 过程中，我发
javascript - 纯 Javascript end()
如何重新创建 jQuery end() $('#id') .find('.class') .css('font',f) .end() .find('.seven') .css(b,'red') 我有什

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 将鼠标悬停在一级菜单项上时，使二级纯 CSS 下拉菜单出现