当我转到它时，悬停效果消失

【问题标题】：Hover effect goes away when I go to It当我转到它时，悬停效果消失
【发布时间】：2021-06-03 21:33:33
【问题描述】：

我只有一个学校项目，我们必须制作一个网站。我对编码很陌生，所以我一直在关注一个关于如何制作下拉菜单的 youtube 视频，当我将鼠标悬停在我的一个菜单选项上时，悬停效果会一直消失。当我在这里打开 sn-p 时它似乎可以工作，但当我用 google chrome 打开它时却不行。请帮助:(

nav {
  width: 100%;
  height: 60px;
  background-color: #190061;
}

nav h4 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
}

nav ul {
  float: left;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
}

nav ul li a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 18px;
  padding: 24px 14px;
  text-decoration: none;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: #190061;
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li a {
  padding: 8px 14px;
}

nav ul li ul li a:hover {
  background-color: red;
}

nav ul li ul li {
  width: 180px;
  border-radius: 4px;
}

<nav>
  <h4>Esports Pcs</h4>
  <ul>
    <li><a href="homepage.html">Home</a></li>
    <li><a href="pcsweoffer.html">PCs</a>
      <ul>
        <li><a href="pcsweoffer.html">The Low End Destroyer</a></li>
        <li><a href="pcsweoffer.html">The Mid End Ravager</a></li>
        <li><a href="pcsweoffer.html">The High End Beast</a></li>
        <li><a href="pcsweoffer.html">The Ultimate Desecrator</a></li>
      </ul>
    </li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Help</a></li>
  </ul>
</nav>

【问题讨论】：

• 如果您无法在此处重新创建它，我们无法为您提供太多帮助，因为我们不知道实际没有发生了什么。
• 请打开 F12 并查看元素选项卡以查看附加到您的 css 的内容（可能其他一些 css 覆盖您的 css 等）
• 只是在这里猜测......但如果每个菜单项的“左侧”在悬停时不会做出反应（不会变红并且没有光标变化）是问题，请设置将 nav ul li ul 填充为 0。如果有填充，请将 :hover 动作从 移动到
• 本身。