为什么我的悬停命令不起作用？

Question

我一直在尝试使用一些简单的css制作一个下拉菜单，我无法理解为什么下拉列表不能正常工作我已经尝试了我能想到的一切，我已经发布了css和html。 html代码就是这个

instance_variable_get

css就是这个

   <ul><li>Home</li>
  <li>Crockery</li>
  <li>
    Cutlery
    <ul>
      <li>Kings</li>
      <li>Bead</li>
      <li>Tableware</li>
    </ul>
  </li>
  <li>Glassware</li>
  <li>Contact</li>
</ul> 

Answer 1

删除这一行：

opacity: 0;
visibility: hidden;

来自ul li ul{}选择器。

https://jsfiddle.net/uc1pq9no/3/

Answer 2

您必须使用visibility，z-index和opacity更新✄您的代码作为此示例：

  ul li:hover ul {
    display: block;
    visibility: visible;
    z-index: 12;
    opacity: 1;
  }

此代码使悬停在第一级别菜单项上显示子菜单，其中pseudo-class-selectors

→测试here a working demo。