html - CSS 下拉菜单正在等待单击该元素，然后悬停有效

Question

我的悬停 CSS 下拉菜单仅在用户单击该选项后才起作用，在单击后立即显示下拉菜单，并且悬停时其行为完美， 我不明白为什么会发生这种情况以及如何让悬停不等待点击，

这里是 html 代码:

<li>
  <a href="#" class="nav-item">events</a>
  <div class="nav-content">
    <div class="nav-sub">
      <ul>
        <li>
          <a href="#" class="nav-item">weddings</a>     
          <div class="underline"></div>
        </li>
        <li>
          <a href="#" class="nav-item">parties</a>
          <div class="underline"></div>
        </li>
        <li>
          <a href="#" class="nav-item">birthdays</a>
          <div class="underline"></div>
        </li>
      </ul>
    </div>
  </div>
</li>

继承人相关的CSS:

    .nav-item {
        display: inline-block;   
        padding:  20px, 30px;
        height:  0px;
        width: 130px;
        color: black;
        text-decoration: none;
         border-color: black;
        line-height: 40px;
    }


    .nav-content{
        position: absolute;
        background-color: white;
        border-color: black;
        color: #000000; font-family: "Varela Round";
        font-size: 15px;
        line-height: 24px;
        text-align: right;
        list-style-type: none;
        z-index: 99999;
        display: none;
        left: 1110px;
    }

    .nav-sub{    
        padding: 1px;
        border: 1px solid #000000;
        position: relative;
        z-index: 10;
    }


    .nav-sub ul li:hover {
        background-color: black;
    }

    .nav-sub ul li:hover > .nav-item{
        color: white;
    }

    .nav-item:focus{
        background-color:whitesmoke;
    }

    .nav-item:hover ~ .nav-content{
        display: block;

    }
    .nav-content:hover{
        display: block;
    }

Answer 1

一般来说，您的代码对于下拉导航菜单来说非常可靠。它也适用于 jsFiddle。 .如果在您单击之前它没有显示，则您的其他一些代码(未发布)正在干扰。您可能必须发布其余代码才能获得帮助，找出导致该行为的原因。

注意:

您会注意到，除非您进行一些更改，否则定位将是一件苦差事。这是因为相对于窗口绝对定位通常只会带来麻烦。

    /* Makes absolute children relative to the container */
    li { 
        position: relative;
    }

    .nav-content {
        ...
        left: 0;
        ...
    }

fiddle 显示了更改，仅仅是因为它以其他方式导致无法访问演示。