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

问题在于继承。您尝试使用的最后一个块是查找.shrt的子节点的.dropcmpy元素（显然不存在）。替代方案起作用的原因是因为.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

正如约翰所说，选择器.class1 .class2的目标是一个具有class =＆＃34; class2＆＃34;这是class =＆＃34; class1＆＃34;。

的元素的子元素

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

Usuall方式是使用按钮内的其他列表，例如

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

应该这样做，希望它有用:)。

悬停未显示下拉菜单

4 个答案: