html - 带有图像的 CSS 下拉菜单

Question

我正在尝试根据您在这张图片中看到的 4 张图片制作一个下拉菜单 --> http://www.potmetnoten.nl/images/dropdown.png我正在努力实现以下目标:

• 最初只显示第一张图片。
• 将鼠标悬停在第一张图片上时 --> 显示其他图片。

我已经尝试了各种显示和可见的东西，但都不起作用。当我将鼠标悬停在第一张图片 (li) 上时，什么也没有发生。

你们有没有看到我遗漏了什么？非常感谢。

    ul {

      list-style: none;

      width: 200px;

      height: 170px;

      padding-left: 30px;

      margin: 0px;

      border: none;

      float: left;

      margin-right: 5px;

      position: relative;

      z-index: 1;

    }

    li[data-type="noten"] {

      background-image: url(images/menu-noten.jpg);

      background-repeat: no-repeat;

      display: block;

    }

    li[data-type="pitten"] {

      background-image: url(images/menu-pitten.png);

      background-repeat: no-repeat;

      display: none;

    }

    li[data-type="muesli"] {

      background-image: url(images/menu-muesli.png);

      background-repeat: no-repeat;

      display: none

    }

    li[data-type="fruit"] {

      background-image: url(images/menu-fruit.png);

      background-repeat: no-repeat;

      display: none;

    }

    li:hover li {

      display: block;

      /* display the dropdown */

    }

<ul>
  <li data-type="noten"></li>
  <li data-type="pitten"></li>
  <li data-type="muesli"></li>
  <li data-type="fruit"></li>
</ul>

Answer 1

试试这个:

li[data-type="noten"]:hover li

如果它不起作用，给你的 li[data-type="noten"] 一个类，比如 class=first并尝试

li:first:hover li {}

否则试试:

ul:hover li{}

另外:你在 parent 身上强加了一个特定的高度(ul)你不应该这样做让 parent 总是一个接一个地获取列表中所有 child 的总高度