[Vuejs]-How to keep dropdown visible Vue.js Tailwind

by

0👍

✅

By using the :hover pseudo-class on the parent li element instead of the .dropdown element.

.dropdown {
      display: none;
      top: 2.5rem;
      left: 0;
      position: absolute;
    }
    
    li:hover .dropdown {
      display: block;
    }
    
    li:hover > a {
      background-color: #f3f4f6;
    }
    
    @media (max-width: 768px) {
      .navigation {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }
      .auth {
        margin-top: 1rem;
      }
    }

The dropdown will remain visible as long as the mouse is over either the parent li or the dropdown itself.

Leave a comment