时间戳

首页 > 解决方案 > CSS下拉菜单只显示一个没有链接的小矩形，为什么它不起作用？

html - CSS下拉菜单只显示一个没有链接的小矩形，为什么它不起作用？

问题描述

我有这个 html 代码，我需要将汽车部分下拉，但它只显示一个灰色的小矩形

.sub-menu-caption {
  text-decoration: none;
  position: relative;
  display: inline-block cursor: pointer;
  float: left;
  color: white;
  opacity: 0.7;
  text-align: center;
  padding: 2px, 4px;
  border-right: 1px solid rgb(255, 0, 0, 0.5);
  border-left: 1px solid rgb(255, 0, 0, 0.5);
}

.sub-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.sub-menu-caption:hover {
  background-color: red;
  display: block;
}

.sub-menu-caption a {
  display: none;
  position: relative;
}

.sub-menu a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sub-menu-caption:hover .sub-menu {
  display: block;
}
<nav id="main-menu" class="section">
  <ul class="parent-menu">
    <li class="sub-menu-caption">Automobiles
      <ul class="sub-menu">
        <li><a href="https://auto.ferrari.com/en_US/sports-cars-models/car-range/812-superfast">812 Superfast</a></li>
        <li><a href="https://auto.ferrari.com/en_US/sports-cars-models/car-range/gtc4lusso">GTC4Lusso</a></li>
        <li><a href="https://auto.ferrari.com/en_US/sports-cars-models/car-range/ferrari-488-gtb">488 GTB</a></li>
        <li><a href="https://auto.ferrari.com/en_US/sports-cars-models/car-range/488-spider">488 Spider</a></li>
      </ul>
    </li>
  </ul>
</nav>

我无法弄清楚为什么当我将鼠标悬停在它上面时它只显示一个小的灰色矩形。我的 .sub-menu-caption:hover .sub-menu 部分有什么问题吗？我想弄清楚，但就是不能。提前致谢！

标签： htmlcss

解决方案

根据您粘贴的代码，它似乎工作得很好。尝试运行代码片段，您就会明白我的意思。您设置的白色链接颜色使在页面.sub-menu-caption中.sub-menu a难以看到，因此我已将其删除，但您将从该屏幕抓取中看到它有效。我认为您页面上的其他内容正在干扰。

屏幕抓取

推荐阅读