悬停不显示下拉菜单

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 一个类，然后使用它。否则不会出现下拉菜单。这提出了整个条带将生成菜单的问题，而我只想要 shrt。

Answer 1

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

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

Answer 2

为了使用 css 显示悬停对象，该对象必须是悬停对象的兄弟或子对象（因为没有父选择器）。您的代码中不是这种情况。

所以你有几个选择：

• 使div.dropcmpy 成为li.shrt 的子级。 （如Teuta Koraqi's answer）

• 破解。使用一个空的伪元素 (.dropcmpy::before) 并将其绝对定位在 li.shrt 上，然后将其用作悬停元素。

• 使用javascript

我不知道您的页面结构是什么，因此无法确定其中哪一个最适合您。如果你能管理的话，第一个肯定是最干净的。

Answer 3

经过@JohnCH 的提醒，我意识到您可以像这样使用同级选择器来获得我认为您想要的功能。

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

Answer 4

正如 john 所说，选择器 .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;}

应该可以了，希望对你有帮助:)。