Непонятная область блока

[Johnney]

Приветствую!

Интересная штука. Когда водишь мышью над третьим пунктом меню (Logout), попадается непонятная невидимая область, принадлежащая второму пункту (Gallery). И она довольно большая. Это хорошо видно по ховер эффекту изменения цвета иконки второго пункта. Такое действо происходит в Хроме, Опере, Сафари. А в Фаерфоксе - нет.

Что это?

 

http://tellmeof.cc.ua/DarkVertMenu/darkvertmenu.html

[Zverushka]

Я так понимаю, что блоки 2го меню создают новый контекст форматирования (они невидимы, но уходят вниз в столбик один за другим), поэтому они перерекрывают обычный слой 3го меню.

Поправить это можно задав 3го пункту меню position: relative. Я правда не понимаю, почему inline надпись 3го пункта не перекрывается, ведь она же не создает свой контекст. Может кто объяснит?

 

А вот, кажется нашла в чем дело.

Может быть все дело в этом элементе 

.milone::after, .miltwo::after {

1. content: "";
2. display: inline-block;
3. width: 100%;

}

Он уходит ниже своего блока и высота у него не ноль а такой же выосты линии, пэтому он создает проблемы своим контекстом форматирования (создается новый контекст форматирования).

 

Вот такой стиль вроде также помогает 

.menu-item-link, .mitwo-submenu-item-link {

overflow: hidden;

}

Edited November 30, 2013 by Zverushka

[Johnney]

Так и есть. Спасибо!

Я подозревал что дело в этом. И добавлял overflow: hidden. Но эффекта не увидел, и решил что дело в чём-то другом, чего не знаю. Видимо ошибся, влепил не туда...

Кстати, overflow: hidden можно добавить только тем элементам, которым добавляется псевдоэлемент:

 

.milone,.miltwo{ overflow: hidden; }.

 

Остальным он не нужен.

Edited November 30, 2013 by Johnney