悬停不显示下拉菜单

Question

我正在尝试制作下拉菜单，但悬停没有产生所需的显示效果。我只想在鼠标悬停在列表元素上时显示下拉菜单。我是 HTML 和 CSS 的新手，所以我无法查明我的错误。

相关HTML：

#strip{
     width: 950px;
     height: 28px;
     background-color: #2c276d;
     font-size: 10pt;
    }
    
    .strip{
     margin:0;
     padding: 0;
    }
    
    .strip li{
     list-style-type: none;
     float: left;
    }
    
    .strip li a {
     color: white;
     text-decoration: none;
     display: block;
     text-align: center;
     width:140px;
     height:23px;
     padding-top:5px;
     border-right: 1px solid #FFFFFF;
    }
    
    .strip li.shrt a{
     width: 145px; 
    }
    
    .dropdown {
     position: relative;
     display: inline-block;
    }
    
    .dropcmpy {
     display: none;
     position: absolute;
     background-color: #2c276d;
     font-size: 10pt;
     width: 145px;
    }
    
    .dropcmpy a { 
     color: white;
     display: block;
     text-decoration: none;
     padding: 5px;
     border-top: 1px solid #FFFFFF;
    }
    
    .strip li a:hover{
     background-color: #28A2D5;
    }
    
    li.shrt:hover .dropcmpy {
     display: block;
    }

 <div id="main">
     <div id="strip">
      <ul class="strip">
       <li class="shrt"><a href="#">Com</a></li>
      </ul>
     </div>
     <div class="dropcmpy">
      <a href="#">Key</a>
      <a href="#">Ad</a>
      <a href="#">Fac</a>
      <a href="#">Car</a>
      <a href="#">FAQ</a>
     </div>
    </div>

无论我如何格式化最后一块 CSS，它都不会生成下拉菜单，除非我这样做

#main:hover .dropcmpy {
        display: block;
    }

或者给第一个 div 一个 class，然后使用它。否则下拉菜单不会出现。这提出了整个条带将产生菜单的问题，而我只想要 shrt。

Answer 1

问题出在继承上。您尝试使用的最后一个块是寻找一个 .dropcmpy 元素，它是 .shrt 的子元素（显然不存在）。替代方案起作用的原因是因为 .dropcmpy 是#main.

的子项

我认为使用#main 作为悬停侦听器没有任何问题，因为与下拉菜单相关的所有内容无论如何都包含在其中。

Answer 2

为了在 css 悬停时显示 object，object 必须是被悬停的事物的兄弟或 child（因为没有parent 个选择器）。在您的代码中不是这种情况。

所以你有几个选择：

使 div.dropcmpy 成为 li.shrt 的 child。（如 Teuta Koraqi's answer）
破解。使用一个空的伪元素 (.dropcmpy::before) 并将其绝对定位在 li.shrt 上，然后将其用作悬停元素。
使用javascript

我不知道你的页面结构是什么，所以不能说哪一个最适合你。如果你能做到，第一个肯定是最干净的。

Answer 3

在@JohnCH 的提醒下，我意识到你可以像这样做一个兄弟选择器来获得我认为你想要的功能。

#strip:hover+.dropcmpy {
  display: block;
}

Answer 4

正如约翰所说，选择器 .class1 .class2 以 class="class2" 为目标的元素是 class="class1" 元素的子元素.

这意味着您需要将下拉菜单放在元素内部，这应该在鼠标悬停时显示下拉菜单。

通常的方法是在按钮内使用另一个列表，例如

<div id="main">
    <div id="strip">
        <ul class="strip">
            <li class="shrt">
                <a href="#">Com</a>
                <ul class="dropcmpy">
                    <li><a href="#">Key</a></li>
                    <li><a href="#">Ad</a></li>
                    <li><a href="#">Fac</a></li>
                    <li><a href="#">Car</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

和css

.dropcmpy {display: none;}
.shrt:hover .dropcmpy {display: block;}

应该做到了，希望对您有所帮助:)。

悬停不显示下拉菜单

Hover is not displaying a dropdown menu

html

css

hover

drop-down-menu