Третий уровень CSS Выпадающее меню не отображается когда курсор мыши на него

Question

я обнаружил некоторые ошибки в этом шаблоне относительно проблем меню Опуститесь:

1 - Меню третьего уровня только будет отображаться, если точка указатель мыши вне области меню 2-го уровня.

2 - Меню третьего уровня будет мигать, когда указатель мыши перемещается в области меню третьего уровня.

сайт: http://ggbestworld.blogspot.com

CSS код:

#main-top { 
padding: 0 30px; 
position: relative; 
} 

#main-top .main-top-left { 
background: url("https://lh6.googleusercontent.com/-JEZl1PMDYo8/UYtjykAgWaI/AAAAAAAAFtY/ND01RKL4rPA/s60/main-top-boxed-light-left.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
height: 60px; 
left: 0; 
position: absolute; 
top: 0; 
width: 30px; 
} 

#main-top .main-top-right { 
background: url("https://lh3.googleusercontent.com/-TnI3BPLsLiU/UYtjzoTF-cI/AAAAAAAAFrY/yxkF14BLCRU/s60/main-top-boxed-light-right.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
height: 60px; 
position: absolute; 
right: 0; 
top: 0; 
width: 30px; 
} 

#main-top .main-top-middle { 
background: url("https://lh3.googleusercontent.com/-NFrvbTMMStw/UYtjyyqk4kI/AAAAAAAAFrQ/Vf5E3lp2e-I/s60/main-top-boxed-light-middle.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0); 
height: 60px; 
} 

#menu-wrapper { 
position: relative; 
} 

#main-menu .flip-dark { 
margin: -57px 13px 0; 
position: relative; 
z-index: 999; 
} 

#main-menu .flip-dark .menu-left { 
height: 57px; 
left: 0; 
position: absolute; 
top: 0; 
width: 17px; 
} 

#main-menu .flip-dark .menu-right { 
height: 57px; 
position: absolute; 
right: 0; 
top: 0; 
width: 17px; 
} 

#main-menu .flip-dark .menu-middle { 
height: 57px; 
margin: 0 17px; 
} 

#main-menu .flip-dark .menu a { 
display: block; 
font-family: Arial,Helevtica,Verdana,san-serif; 
font-size: 11px; 
letter-spacing: 1px; 
line-height: 100%; 
padding: 20px 15px 17px; 
text-decoration: none; 
text-transform: uppercase; 
} 

#main-menu .flip-dark .menu ul { 
border-style: solid; 
border-width: 0 1px 1px; 
margin: 49px 0 0; 
padding: 8px 0; 
} 

#main-menu .flip-dark .menu-left { 
background: url("https://lh4.googleusercontent.com/-ly-FrHHkF-s/UYtj0Bds3UI/AAAAAAAAFs4/I4-SVHralkQ/s228/menu-flip-dark.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
} 

#main-menu .flip-dark .menu-right { 
background: url("https://lh4.googleusercontent.com/-ly-FrHHkF-s/UYtj0Bds3UI/AAAAAAAAFs4/I4-SVHralkQ/s228/menu-flip-dark.png") no-repeat scroll 0 -114px rgba(0, 0, 0, 0); 
} 

#main-menu .flip-dark .menu-middle { 
background: url("https://lh4.googleusercontent.com/-ly-FrHHkF-s/UYtj0Bds3UI/AAAAAAAAFs4/I4-SVHralkQ/s228/menu-flip-dark.png") repeat-x scroll 0 -57px rgba(0, 0, 0, 0); 
} 

#main-menu .flip-dark .menu a:hover { 
    background: url("https://lh4.googleusercontent.com/-ly-FrHHkF-s/UYtj0Bds3UI/AAAAAAAAFs4/I4-SVHralkQ/s228/menu-flip-dark.png") repeat-x scroll 0 -171px rgba(0, 0, 0, 0); 
} 

#main-menu .flip-dark #search-trigger { 
    background-image: url("https://lh4.googleusercontent.com/-PGNhVMEi2-8/UYtj07YhSOI/AAAAAAAAFrk/ZiWyLpI720Y/s60/search-popup-trigger-dark.png"); 
} 

#main-menu .flip-dark .menu, #main-menu .flip-dark .menu li { 
    float: left; 
} 

#main-menu .flip-dark .menu li li a { 
    display: block; 
    font-size: 11px; 
    margin: 0 8px; 
    padding: 13px 12px 11px; 
} 
#main-menu .flip-dark .menu li li a:hover { 
    background-image: none; 
    border-radius: 5px; 
} 
#main-menu .flip-dark .menu a { 
    color: #EAEAEA; 
    text-shadow: 1px 1px 1px #000000; 
} 
#main-menu .flip-dark .menu li li a { 
    color: #FFFFFF; 
} 

#main-menu .flip-dark .menu ul { 
    background-color: #282828; 
    border-color: #000000; 
} 
#main-menu .flip-dark .menu li li a:hover { 
    background-color: #313131; 
} 
#main-menu .menu, #main-menu .menu * { 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    z-index: 999; 
} 
#main-menu .menu { 
    line-height: 1; 
} 

#main-menu .menu ul { 
    position: absolute; 
    top: -999em; 
    width: 225px; 
} 
#main-menu .menu ul li { 
    width: 100%; 
} 
#main-menu .menu li:hover { 
    visibility: inherit; 
} 
#main-menu .menu li { 
    float: left; 
    position: relative; 
} 
#main-menu .menu a { 
    display: block; 
    position: relative; 
} 
#main-menu .menu li:hover ul, #main-menu .menu li.sfHover ul { 
    left: 0; 
    top: 0; 
    z-index: 999; 
} 

#main-menu .menu li li:hover ul, #main-menu .menu li li.sfHover ul { 
    left: 225px; 
    margin: 0; 
    top: 0; 
} 

#main-menu .menu a.with-ul { 
    min-width: 1px; 
    padding-right: 2.25em; 
} 
.sub-indicator { 
    display: block; 
    height: 10px; 
    overflow: hidden; 
    position: absolute; 
    right: 3px; 
    text-indent: -999em; 
    top: 1.05em; 
    width: 10px; 
} 
a > .sub-indicator { 
    background-position: 0 -100px; 
    display: none; 
    top: 20px; 
} 
a:focus > .sub-indicator, a:hover > .sub-indicator, a:active > .sub-indicator, li:hover > a > .sub-indicator, li.sfHover > a > .sub-indicator { 
    background-position: -10px -100px; 
} 
#main-menu .menu ul a > .sub-indicator { 
    background-position: 0 0; 
} 
.shadow ul { 
    padding: 0 8px 9px 0; 
} 
.shadow ul.shadow-off { 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); 
} 
#main-menu .menu li:hover li ul, ul#main-menu .menu li.sfHover li ul, #main-menu .menu li li:hover li ul, #main-menu .menu li li.sfHover li ul { 
    top: -999em; 
} 
#main-menu .menu ul .sub-indicator, #main-menu .menu ul a:focus > .sub-indicator, #main-menu .menu ul a:hover > .sub-indicator, #main-menu .menu ul a:active > .sub-indicator, #main-menu .menu ul li:hover > a > .sub-indicator, #main-menu .menu ul li.sfHover > a > .sub-indicator { 
    background-position: -10px 0; 
} 

HTML код:

<div id='menu-wrapper'> 
<div id='main-top'> 
<div class='main-top-left'/> 
<div class='main-top-right'/> 
<div class='main-top-middle'/> 
</div> 
<div id='main-menu'> 
<div class='flip-dark' id='menu-inner'> 
<div class='menu-left'> </div> 
<div class='menu-middle'> 
<div class='menu-middle-inner'> 
<ul class='menu' id='menu-main-menu'> 
    <li><a href='#'>Home</a></li> 
    <li><a href='#'>Blog</a></li> 
    <li><a href='#'>Portfolio</a></li> 
    <li><a href='#'>Sidebar Layouts</a> 
    <ul class='sub-menu'> 
    <li><a href='#'>Full Width Page</a></li> 
    <li><a href='#'>Sidebar Right</a></li> 
    <li><a href='#'>Sidebar Left</a></li> 
    <li><a href='#'>Double Sidebars</a></li> 
    <li><a href='#'>Double Right Sidebars</a></li> 
    <li><a href='#'>Double Left Sidebars</a></li> 
</ul> 
</li> 
    <li><a href='#'>Sample Layouts</a> 
    <ul class='sub-menu'> 
    <li><a href='#'>Business Homepage #1</a></li> 
    <li><a href='#'>Business Homepage #2</a></li> 
    <li><a href='#'>Business Homepage #3</a></li> 
    <li><a href='#'>Business Homepage #4</a></li> 
    <li><a href='#'>Classic Magazine #1</a></li> 
    <li><a href='#'>Classic Magazine #2</a></li> 
    <li><a href='#'>Design Agency</a></li> 
    <li><a href='#'>Portfolio Homepage</a></li> 
    <li><a href='#'>Showcase Blogger</a></li> 
    <li><a href='#'>The Orman</a></li> 
    <li><a href='#'>The McAlister</a></li> 
    <li><a href='#'>The WebTreats Special</a></li> 
</ul> 
</li> 
    <li><a href='#'>Features</a> 
    <ul class='sub-menu'> 
    <li><a href='#'>Contact Forms</a></li> 
    <li><a href='#'>Layout Builder</a></li> 
    <li><a href='#'>Lightbox Integration</a></li> 
    <li><a href='#'>Portfolios</a></li> 
    <li><a href='#'>Responsive Design</a></li> 
    <li><a href='#'>Shortcodes</a> 
    <ul class='sub-menu'> 
    <li><a href='#'>Columns</a></li> 
    <li><a href='#'>Display Posts</a></li> 
    <li><a href='#'>HTML Elements</a></li> 
    <li><a href='#'>Icons</a></li> 
    <li><a href='#'>Sliders</a></li> 
    <li><a href='#'>Tabs and Toggles</a></li> 
</ul> 
</li> 
    <li><a href='#'>Slider Manager</a></li> 
    <li><a href='#'>Total Control</a> 
    <ul class='sub-menu'> 
    <li><a href='#'>Content Options</a></li> 
    <li><a href='#'>Font Control</a></li> 
    <li><a href='#'>Footer Options</a></li> 
    <li><a href='#'>Post Options</a></li> 
</ul> 
</li> 
    <li><a href='#'>Typography</a></li> 
    <li><a href='#'>Unlimited Sidebars</a></li> 
</ul> 
</li> 
    <li><a href='#'>Page Templates</a> 
    <ul class='sub-menu'> 
    <li><a href='#'>Archives</a></li> 
    <li><a href='#'>Post List</a></li> 
    <li><a href='#'>Post Grid</a> 
    <ul class='sub-menu'> 
    <li><a href='#'>Post Grid &#8211; 2 Columns</a></li> 
    <li><a href='#'>Post Grid &#8211; 3 Columns</a></li> 
    <li><a href='#'>Post Grid &#8211; 4 Columns</a></li> 
    <li><a href='#'>Post Grid &#8211; 5 Columns</a></li> 
</ul> 
</li> 
    <li><a href='#'>Sitemap</a></li> 
    <li><a href='#'>Redirect</a></li> 
</ul> 
</li> 

Я ищу некоторые помогает решить эти проблемы.

Большое спасибо ...

Answer 1

У вас есть этот селектор:

#main-menu .menu li:hover li ul { 
    top: -999em; 
} 

Это делает ваше меню третьего уровня быть вне визуального; измените это на > селектор, чтобы уточнить его и не влияют на ваш третий уровень:

#main-menu .menu li:hover > li > ul { 
    top: -999em; 
}