Выпадающее меню 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;
        ...
    }

Скрипка показывает изменения просто потому, что в противном случае она вызывала недоступную демонстрацию.