Question

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

.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部分有问题吗？我试图弄清楚，但不能。预先感谢！

Answer 1

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

screen grab

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

1 个答案: