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

Question

[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 не используется.

Comments

[Ankhena]

Можно поменять на focus-within
Но лучше бы на JS.

[MrFox235]

Ankhena, А чем focus-within хуже JS скрипта?

[Ankhena]

MrFox235, скрипт работает так, как вы скажете. Например, закроет меню по esc. CSS об этом ничего не знает.

[MrFox235]

Ankhena, Спасибо, всё работает)

Answer 1

[MrFox235]

Ответ был написан пользователем Ankhena в коментариях.

Answer 2

[Сергей delphinpro]

.dropdown-bt:focus + .dropdown-content {
    display: flex;
}

но это плохая затея.

Comments

[MrFox235]

Я пробовал этот способ, он не работает(

[szQocks]

MrFox235, прижми .dropdown-content к блоку, и задай ему паддинги а внутри уже расположи контент, и тогда при ховере всё будет работать, то есть при top: 0 - работает, остальное - верстка

[Сергей delphinpro]

MrFox235, правда? почему же у меня работает?

[MrFox235]

szQocks, Но мне нужно что бы меню оставалось весеть пока пользователь водит курсором вне меню, и пропадало когда он кликнет вне области меню.

[Сергей delphinpro]

MrFox235, ну так добавьте пару строчек скрипта и не занимайтесь ерундой...
варианты с фокусом или таргетом, конечно, будут работать. Но у них есть свои сайд-эффекты.

[MrFox235]

Сергей delphinpro, Самому хотелось бы знать.

[MrFox235]

Сергей delphinpro, Под сайд-эффектами подразумивается фокусировка на этих элементах при нажатии на клавишу Tab?