Элементы подменю WordPress не отображаются правильно при наведении

Question

У меня возникают проблемы с элементами подменю на следующем сайте. На самом деле проблема связана с элементами под-подменю, то есть с элементами третьего уровня (я не уверен, что они фактически называются).

Для просмотра «calzada321» (без кавычек) может потребоваться пароль для входа.

http://polynovo.com.au/

Как на скриншот (ссылка ниже), в большинстве браузеров, элементы 3-го уровня является искаженными, т.е. они не отображаются в привлекательном или полезном способе при наведении курсора мыши. Я не уверен, как исправить (очевидно). Любая помощь оценивается.

http://polynovo.com.au/wp-content/uploads/2014/11/Untitled-1.jpg

/* 2.3 Navigation 
 
------------------------------------------------------------------------------*/ 
 

 
#navigation { 
 
\t margin-bottom: 7px; 
 
\t position: relative; 
 
\t z-index: 2; 
 
} 
 

 
#navigation .menu-item { 
 
\t float: left; 
 
\t background: url(../images/common/bg_nav-separator.png) no-repeat 0 center; 
 
\t position: relative; 
 
} 
 

 
#navigation .menu-item:first-child { 
 
\t background: none; 
 
} 
 

 
#navigation .menu-item.has-sub-menu:hover { 
 
\t background-color: #e5eaef; 
 
} 
 

 
#navigation .menu-item a { 
 
\t color: #002d62; 
 
    display: block; 
 
    font-size: 15px; 
 
    /* font-weight: bold; */ 
 
    padding: 18px 17px 18px 16px; 
 
    text-transform: uppercase; 
 
} 
 

 
#navigation .menu-item:first-child a { 
 
\t padding-left: 3px; 
 
} 
 

 
#navigation .current-menu-item > a, 
 
#navigation .current-page-ancestor > a, 
 
#navigation .menu-item a:hover { 
 
\t color: #c72932; 
 
\t text-decoration: none; 
 
} 
 

 
#navigation .has-sub-menu .current-page-ancestor > a { 
 
\t color: #002e62; 
 
} 
 

 
#navigation .has-sub-menu .current-page-ancestor > a:hover { 
 
\t color: #fcb040; 
 
\t text-decoration: none; 
 
} 
 

 
/* Sub-navigation */ 
 
#navigation .sub-menu { 
 
\t display: none; 
 
\t position: absolute; 
 
\t top: 50px; 
 
\t left: 0; 
 
\t padding: 17px 22px 18px; 
 
\t width: 155px; 
 
\t background: #e5eaef; 
 
} 
 

 
#navigation .menu-item.has-sub-menu:hover .sub-menu { 
 
\t display: block; 
 
} 
 

 
/* ---I added this item below made sub-sub items sit out more but still not good---*/ 
 
#navigation .menu-item.has-sub-menu:hover .sub-menu .sub-menu { 
 
\t margin-left:200px; 
 
\t margin-top:-35px; 
 
\t display:block; 
 
} 
 

 
#navigation .sub-menu .menu-item { 
 
\t float: none; 
 
\t padding-left: 12px; 
 
\t margin-bottom: 5px; 
 
\t background: transparent url(../images/common/sprite_icons.png) no-repeat 1px -229px; 
 
} 
 

 
#navigation .sub-menu .menu-item a { 
 
\t padding: 0; 
 
\t font-weight: normal; 
 
\t line-height: 40px; 
 
\t text-transform: none; 
 
}

Answer 1

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

.menu-item:hover > .sub-menu{ display: block } 

И, наконец, для вашей проблемы добавьте стиль для подменю, начиная с третьего уровня. Вам просто нужно установить для свойства left значение 0;

.sub-menu .sub-menu{ left: 0 } 

EDITED ОТВЕТ СОГЛАСНО фрагмент кода

вы можете изменить этот селектор, который предназначен для отображения подменю в этом

#navigation .menu-item:hover > .sub-menu { display: block } 

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

Далее вам нужно добавить стиль для меню третьего уровня, так как это меню расположено на левой стороне.

#навигация .sub-menu .sub-menu { левый: 100%; верх: 0; }

Поскольку подменю абсолютна позиционируется, вам просто нужно установить слева на 100%, это будет помещен в меню третьего уровня сидеть рядом с выбранным меню 2-го уровня