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

Posted 2023-03-06

【中文标题】CSS 选择器错误 - 悬停时未显示子菜单

【英文标题】：CSS selector error - Submenu not showing on Hover

【发布时间】：2018-04-08 23:47:42

【问题描述】：

一直在努力让我的子菜单在悬停时显示，它可以工作，但是一旦我滑出父元素“.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); 
     

【问题讨论】：

您的 .dropdown-menu 必须是 .dropdown-toggle 的子元素，即使您从 .dropdown-toggle 本身移出到 .dropdown-menu 时 :hover 也能正常工作。在你的情况下，从你的 css 来看，这两个是兄弟姐妹，这是行不通的。

一种解决方法是将, .dropdown-menu:hover 添加到第二个选择器。

感谢您的回答，虽然这不起作用

【参考方案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); 
     

【讨论】：

感谢您的回答！这几乎奏效了，但它引导我朝着正确的方向前进，最终解决方案是。

【参考方案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/

【参考方案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);