CSS 选择器错误 - 悬停时未显示子菜单

Question

一直在努力让我的子菜单在悬停时显示，它可以工作，但是一旦我滑出父元素“.dropdown-toggle”，子菜单就会消失。

已经尝试了几个小时来解决这个问题，请查看下面的代码，看看您是否可以解决这个问题。

非常感谢

  .dropdown-menu {
     position: absolute;
     top: 40px;
     border: none;
     padding: 0;
     border-radius: 0;
     width: 200px;
     background: #e8e8e8;
     visibility:hidden;
     opacity:0;
     filter:alpha(opacity=0);
     -webkit-transition:700ms ease;
     -moz-transition:700ms ease;
     -o-transition:700ms ease;
     transition:700ms ease;
     }

   .dropdown-toggle:hover + .dropdown-menu, .dropdown-menu { 
     display: block; 
     visibility:visible; 
     opacity:1; 
     filter:alpha(opacity=100); 
     }

Answer 1

只要做一些改变就可以解决这个问题:dropdown-toggle 更改为 dropdown-menu。(父更改)

.dropdown-menu {
     position: absolute;
     top: 33px; /* reduced the gap so that it wont dissapear while hovering on submenu*/
     border: none;
     padding: 0;
     border-radius: 0;
     width: 200px;
     background: #e8e8e8;
     visibility:hidden;
     opacity:0;
     filter:alpha(opacity=0);
     -webkit-transition:700ms ease;
     -moz-transition:700ms ease;
     -o-transition:700ms ease;
     transition:700ms ease;
     }

   .dropdown:hover .dropdown-menu { 
     display: block; 
     visibility:visible; 
     opacity:1; 
     filter:alpha(opacity=100); 
     }