The rollover of a specific menu item is not showing the hidden sub menu

I created some classes for the menu items, so I can call upon them.

      .dropdownBox {
        display: none;
      }

      .dropdown li:hover > ul.dropdownBox {
        display: block;
      }

However, the roll over state for 'Work' that has the class .dropdown is now showing the submenu items that has the class .dropdownBox

    <nav class="screen2_menu_container">
      <label for="screen2_menu_check" class="screen2_menu_btn">
        <!-- checkbox to track when the hamburger menu is clicked on -->
        <input type="checkbox" id="screen2_menu_check" class="screen2_input" />

        <!-- the hamburger menu -->
        <div class="screen2_menu_hamburger"></div>

        <!-- menu items -->
        <ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
          <a href="CONTACT-US" rel="history"><span>&gt; CONTACT</span></a>
        </ul>
        <ul
          id="screen2_menu_items_Nav"
          class="screen2_menu_items navPositionLeft"
        >
          <li>
            <a href="HOME" rel="history"><span>&gt; HOME</span></a>
          </li>
          <li class="dropdown">
            <a href="WORK"><span>&gt; WORK</span></a>
          </li>
          <ul class="dropdownBox">
            <li>
              <a href="WORK-1"><span>WORK-1</span></a>
            </li>
            <li>
              <a href="WORK-2"><span>WORK-2</span></a>
            </li>
            <li>
              <a href="WORK-3"><span>WORK-3</span></a>
            </li>
            </ul>
          <li>
            <a href="REEL"><span>&gt; REEL</span></a>
          </li>
          <li class="hideDiv">
            <a href="CONTACT-US" rel="history"><span>&gt; CONTACT</span></a>
          </li>
        </ul>
      </label>
    </nav>

开发者_C百科I'm trying to use the class .dropdown so when you roll over it, it shows the class .dropdownBox But I cant seem to get the right selector working.

just update your CSS. Hope this will work for you.

  .dropdownBox {
        display: none;
      }

      .dropdown:hover + .dropdownBox  {
        display: block;
        
      }

.dropdownBox:hover {
  display: block;
}

    <nav class="screen2_menu_container">
      <label for="screen2_menu_check" class="screen2_menu_btn">
        <!-- checkbox to track when the hamburger menu is clicked on -->
        <input type="checkbox" id="screen2_menu_check" class="screen2_input" />

        <!-- the hamburger menu -->
        <div class="screen2_menu_hamburger"></div>

        <!-- menu items -->
        <ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
          <a href="CONTACT-US" rel="history"><span>&gt; CONTACT</span></a>
        </ul>
        <ul
          id="screen2_menu_items_Nav"
          class="screen2_menu_items navPositionLeft"
        >
          <li>
            <a href="HOME" rel="history"><span>&gt; HOME</span></a>
          </li>
          <li class="dropdown">
            <a href="WORK"><span>&gt; WORK</span></a>
          </li>
          <ul class="dropdownBox">
            <li>
              <a href="WORK-1"><span>WORK-1</span></a>
            </li>
            <li>
              <a href="WORK-2"><span>WORK-2</span></a>
            </li>
            <li>
              <a href="WORK-3"><span>WORK-3</span></a>
            </li>
            </ul>
          <li>
            <a href="REEL"><span>&gt; REEL</span></a>
          </li>
          <li class="hideDiv">
            <a href="CONTACT-US" rel="history"><span>&gt; CONTACT</span></a>
          </li>
        </ul>
      </label>
    </nav>