@MrFox235
Начинающий веб-разработчик

Какой псевдокласс нужно указать, что бы не пропадало выпадающее меню?

Здравствуйте, у меня возник такой вопрос:
Имеется выпадающий список с таким кодом

<div class="dropdown-transport">
      <a href="#" class="dropdown-bt">Транспорт</a>
      <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
      </div>
</div>


.dropdown-transport {
   width: 161px;
   height: 40px;
   border: 1px solid #808080;
   border-radius: 15px;
   position: relative;
   display: inline-block;
}

.dropdown-bt {
    width: 100%;
    height: 100%;
    padding: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    
}

.dropdown-content {
    width: 170px;
    height: auto;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #808080;
    border-radius: 15px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    top: 10px;
}

.dropdown-content a {
    width: 100%;
    height: 40px;
    padding: 10px;
    border: 1px solid #808080;
    border-radius: 15px;
}

.dropdown-transport:hover .dropdown-content {
    display: flex;
}


При наведении на ссылку будет появляться выпадающее меню ".dropdown-transport:hover .dropdown-content", какие псевдоклассы можно использовать вместо :hover что бы при клике появлялось меню и если курсор уводят с ссылке оно не пропадало?
:focus и :target не работают, нужно что-то на подобие onclick.
JS не используется.
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
@MrFox235 Автор вопроса
Начинающий веб-разработчик
Ответ был написан пользователем Ankhena в коментариях.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
.dropdown-bt:focus + .dropdown-content {
    display: flex;
}


но это плохая затея.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы