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-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); 
     }

Answer 2

你可以试试这个CSS：

.dropdown-menu {
  position: absolute;
  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;
  margin-top: -5px;
  padding-top: 5px;
}
.dropdown-toggle {
  position: relative;
  display: inline-block;
}
.dropdown-toggle:hover .dropdown-menu {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
}

.HTML：

<div class="dropdown-toggle">
  <a>Hover me</a>
  <ul class="dropdown-menu">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2204/

Answer 3

感谢您的所有回答。这是下面的工作解决方案。

  .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:hover .dropdown-menu, .dropdown-menu { 
    display: block; 
    visibility:visible; 
    opacity:1; 
    filter:alpha(opacity=100); 
    }