Выпадающее меню на css не работает в wordpress, !important?

Question

[FashionHighStre]

код:

css

.sub-menuu
{ 
   display: none ; 
} 
.main-itemm:focus ~ .sub-menuu

{ 
   display: block; 
    color:red;
}

<a class="main-itemm" href="javascript:void(0);" tabindex="1" >Открыть подменю</a> 
<ul class="sub-menuu"> 
   <li><a href="#1">подпункт 1</a></li> 
   <li><a href="#2">подпункт 2</a></li> 
   <li><a href="#3">подпункт 3</a></li> 
</ul>

вот страница ( в кратком описании внизу есть ссылка)

Answer 1

[Александр Цымбал]

псевдоселектор :focus не всегда работает правильно. Может быть в нем проблема? Лучше обрабатывать javascript'ом при клике мышью и тач событиях (для планшетов и телефонов).
Другой вариант - упростить всё это дело до :hover, и кликать не нужно

Comments

[FashionHighStre]

попробую с ховер, но мне кажется у меня проблемя с подключением стилей в woocomerce

[FashionHighStre]

.sub-menuu
{
display: none ;
}
.main-itemm:hover ~ .sub-menuu

{
display: block;
color:red;
}

не работает)

Answer 2

[FashionHighStre]

такой вариант тоже не срабатывает

/* CSS */
.spoiler >  input + .box {
    display: none;
}
.spoiler >  input:checked + .box {
    display: block;
}

Текст сообщения в спойлере.