Выпадающее меню, как подправить?

Question

[viktorross]

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

@media (min-width:601px) {
  .topmenu_dsjOoJDd ul {list-style: none;margin: 0;padding: 0;}
  /*.topmenu_dsjOoJDd ul:hover {display:block;}*/
  .topmenu_dsjOoJDd a {text-decoration: none;display: block;color: #222;}
  .topmenu_dsjOoJDd > li {display: inline-block;position: relative;}
  .topmenu_dsjOoJDd > li > a {position: relative;font-size: 14px;}
  .SNkIJSkxn__iD {position: absolute;z-index: 4;left: 50%;top: 100%;width: 250px;padding: 15px 0 15px;margin-top: 5px;background: white;border-radius: 5px;box-shadow: 0 0 30px rgba(0,0,0,.2);box-sizing: border-box;visibility: hidden;opacity: 0;transform: translate(-50%, 20px);transition: .3s;}
  .topmenu_dsjOoJDd > li:hover .SNkIJSkxn__iD {visibility: visible;line-height: 30px;padding: 20px;width: 250px;opacity: 1;margin-top:-10px;box-shadow: 0 0 8px 0 rgba(4, 143, 242, 0.43) !important;transform: translate(-50%, 0);}
  .SNkIJSkxn__iD a {font-family: arial;font-size: 12px;color:#0099ff;padding: 5px 10px;transition: .3s linear;}
  .SNkIJSkxn__iD a:hover {color:red;background:transparent!important;}
    .topmenu_dsjOoJDd > li:hover .SNkIJSkxn__iD { visibility: visible; opacity: 1;transform: translate(-50%, 0);}
    .topmenu_dsjOoJDd li:hover a:before {transform: translate(-50%, 0);opacity: 1;
}

вот эта область в консоле если навести выделяется и видно что именно она висит на пол страницы невидимым блоком
<ul class="SNkIJSkxn__iD"></ul>

и сам html

....
<li class="sdfndkl_FDFS fkS_X">
<ul class="SNkIJSkxn__iD">
<li class="sd__Okdsaq">
<a href="/useraccount.php">
<span class="Xv_MS">Статистика</span>
</a>
</li>
<li style="margin-left: -20px!important;margin-bottom: -15px;">
<a href="/useraccount.php">
<span class="Xv_MS">Статистика</span>
</a>
</li>
</ul>
</li>
...

подскажите как переделать чтобы открывалось меню только тогда, когда наводишь на

Answer 1

[Evgeniy]

Очень сложно воспринимать написанное, но скорей всего где-то стоит лишний :hover
:hover - как раз вызывается при наведении на элемент..

Comments

[viktorross]

Evgeniy добавил сейчас вот это, помогло..

.topmenu_dsjOoJDd ul {display: none;
visibility: hidden;
position: absolute;
top: 40px;
}
.topmenu_dsjOoJDd li:hover>ul {display: block;
visibility: visible;}

до этого часа 2 местами менял сидел

[strelok011]

viktorross, если уж display: none; то visibility: hidden; ни к чему. В обоих каскадах его можно убрать.