如何通过Firefox开发者工具禁用导航栏菜单悬停展开以检查元素间距

• 打开开发者工具：按F12快捷键，或者右键页面空白处选择「检查」，调出Firefox的开发者工具面板。

• 定位目标菜单元素：点击工具左上角的「选择元素」图标（箭头形状），然后点击你要禁用展开的导航菜单项，在工具的HTML面板里找到该菜单项的父容器（通常是<li>标签），以及对应的子下拉菜单元素（比如嵌套的<ul>或<div>）。

• 强制禁用下拉显示样式：

  • 切换到「样式」面板，找到控制下拉菜单显示的CSS规则——通常是带:hover、:focus、:focus-within伪类的选择器，或者包含特定类名（比如open、expanded）的规则。
  • 直接修改该规则的display属性为none，或者添加!important强制覆盖原有样式：display: none !important;
  • 如果下拉是通过JavaScript动态添加类名触发的，直接在HTML面板里选中父菜单项，删掉它身上的触发类（比如open）即可。

• 锁定元素状态避免干扰：
  右键选中的菜单项元素，选择「强制元素状态」，取消勾选:hover、:focus、:active等可能触发下拉的状态，这样即使鼠标悬停或点击菜单项，也不会弹出下拉菜单。

• 彻底移除下拉元素（可选）：
  如果上述方法仍有残留，直接在HTML面板里找到子下拉菜单的节点，右键选择「删除节点」，下拉项会临时消失，方便你专注检查菜单和下方标题div的间距。

你之前设置display:none未生效，大概率是样式优先级不足，或者触发下拉的是你没覆盖到的伪类/动态类，用上面的方法逐一排查就能解决。

内容的提问来源于stack exchange，提问作者Louise Chan