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

CSS选择器错误 - 子菜单未在Hover上显示

3 个答案: