Как заставить выпадающий список работать с display: none и display: block?

Question

У меня есть следующий html код:

<li class="profile-dropdown">
  <a href="/profile" class="login-btn">Profil</a>                               
  <ul>
    <li><a href="/">Test1</li>
    <li><a href="/">Test2</li>
    <li><a href="/">Test3</li>
  </ul>
</li>
<li><a href="/profile/logout" class="login-btn">Logout</a></li>

Со следующими css правилами

.profile-dropdown ul {
  visibility: hidden;
  opacity: 0;

  transition: all 0s ease 1s; /*delay 1s*/
} 
.profile-dropdown:hover ul { 
  visibility: visible;
  opacity: 1;

  position: absolute;
  top: 58px;
  left: -15px;

  transition-delay: 0s;
}

Это будет часть навигационной панели моей веб-страницы. Я хотел бы сделать выпадающий список, который будет появляться только тогда, когда пользователь наводит курсор на родительский элемент li. С правилом видимости все работает нормально, задержка применяется к анимации при наведении, поэтому я могу навести курсор на скрытые элементы li внутри ul, и он все еще остается видимым.

Однако он выглядит хорошо только при наведении курсора , Это выглядит ужасно без зависания, потому что мой контейнер немного больше, когда я использую видимость.

Когда я использую дисплей: нет вместо видимость: скрыто и Отображение: блок вместо Видимость: видимый чем все выглядит нормально, но задержка не применяется, поэтому я не могу навести элементы li внутри скрытого ul.

Есть ли способ заставить видимость не влиять на размер моих элементов или заставить задержку работать с правилом отображения?

Редактировать: Без наведения С парением

Answer 1

.profile-dropdown ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: absolute;
} 
.profile-dropdown:hover ul { 
  visibility: visible;
  opacity: 1;
  position: initial;
}

<li class="profile-dropdown">
  <a href="/profile" class="login-btn">Profil</a>                               
  <ul>
    <li><a href="/">Test1</li>
    <li><a href="/">Test2</li>
    <li><a href="/">Test3</li>
  </ul>
</li>
<li><a href="/profile/logout" class="login-btn">Logout</a></li>

Я добавил абсолютную позицию, поэтому, когда вы используете скрытую видимость, дополнительное пространство удаляется и добавляется позиция назад к начальной, чтобы показать, когда вы наводите курсор мыши на список для отображения подменю в правом месте.

.profile-dropdown ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: absolute;
} 
.profile-dropdown:hover ul { 
  visibility: visible;
  opacity: 1;
  position: initial;
}

Я использовал тот же HTML, что и ваш

<li class="profile-dropdown">
  <a href="/profile" class="login-btn">Profil</a>                               
  <ul>
    <li><a href="/">Test1</li>
    <li><a href="/">Test2</li>
    <li><a href="/">Test3</li>
  </ul>
</li>
<li><a href="/profile/logout" class="login-btn">Logout</a></li>

Проверьте мой кодовый блок

Codepen

Answer 2

Пожалуйста, проверьте фрагмент, я надеюсь, что это то, что вы ищете

 ul{
     list-style:none;
     padding: 0;
        margin: 0;
        display: flex;
    }
    .profile-dropdown{
    padding:5px;
    border:1px solid;
    position:relative;
    }
    .profile-dropdown ul {
    display:none;
    
      transition: all 0s ease 1s; /*delay 1s*/
    } 
    .profile-dropdown:hover ul { 
     display:block;
      opacity: 1;

      position: absolute;
      top: 30px;
      left: 10px;

      transition-delay: 0s;
    }

 <ul>
    <li class="profile-dropdown">
      <a href="/profile" class="login-btn">Profile</a>
      <ul>
        <li><a href="/">Test1</li>
        <li><a href="/">Test2</li>
        <li><a href="/">Test3</li>
        </ul>
    </li>
    <li class="profile-dropdown"><a href="/profile/logout" class="login-btn">Logout</a></li>
    </ul>