Tetikus item menu tertentu tidak menunjukkan submenu tersembunyi
P粉138871485
P粉138871485 2024-04-04 14:39:08
0
1
487

Saya mencipta beberapa kelas untuk item menu supaya saya boleh memanggilnya.

.dropdownBox {
        display: none;
      }

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

Walau bagaimanapun, keadaan skrol "berfungsi" dengan kelas .dropdown kini memaparkan item submenu dengan kelas .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>> CONTACT</span></a>
        </ul>
        <ul
          id="screen2_menu_items_Nav"
          class="screen2_menu_items navPositionLeft"
        >
          <li>
            <a href="HOME" rel="history"><span>> HOME</span></a>
          </li>
          <li class="dropdown">
            <a href="WORK"><span>> 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>> REEL</span></a>
          </li>
          <li class="hideDiv">
            <a href="CONTACT-US" rel="history"><span>> CONTACT</span></a>
          </li>
        </ul>
      </label>
    </nav>

Saya cuba menggunakan kelas .dropdown supaya ia memaparkan kelas .dropdownBox apabila anda menuding di atasnya, tetapi saya nampaknya tidak dapat memastikan pemilih yang betul berfungsi.

P粉138871485
P粉138871485

membalas semua(1)
P粉281089485

Hanya kemas kini CSS anda. Semoga ini berguna kepada anda.

  .dropdownBox {
        display: none;
      }

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

.dropdownBox:hover {
  display: block;
}
    
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan