Почему не работает active на span?

Question

[urajo]

Пытаюсь сделать меню по клику, вешаю классы на спан и событие, но почему-то не работает. В чем может быть проблема?

<span class="active-otd">Экономические службы</span>
							<ul class="hiden-otd">
								<li>
									<span>Экономические службы 1</span>
								</li>
								<li>
									<span>Экономические службы 2</span>
								</li>
							</ul>

.hiden-otd{
	display: none;
}

.active-otd:active .hiden-otd{
	display: block;
}

Comments

[Lord_Dantes]

span, вроде бы не может быть актив.

[Ice]

.active-otd:active + .hiden-otd
Оне же не внутри span, а соседний

[Oleg]

slave, почему бы ему не быть активным? Другой вопрос в правильности использования :active не на ссылках/кнопках
https://developer.mozilla.org/ru/docs/Web/CSS/:active

Answer 1

[Oleg]

Потому что css неправильно прописал.
.hiden-otd является соседом .active-otd:active, а не лежит внутри него

Должно быть так:

.active-otd:active + .hiden-otd{
  display: block;
}

https://jsfiddle.net/q93drm5s/2/

Answer 2

[Meakin]

Ошибка,

.active-otd:active .hiden-otd{
  display: block;
}

Надо:

.active-otd:active + .hiden-otd{
  display: block;
}