我试图在按钮悬停时显示列表，但是发生的事情是，每当我将悬停在按钮区域附近时，都会显示文本。
.header_nav {
width: 800px;
height: 400px;
}
.header_nav ul {
list-style: none;
}
.header_nav ul ul {
display: none;
}
.header_nav ul ul #nav_button:hover>ul {
display: block;
}
.header_nav ul ul li >ul {
display: none;
}
.header_nav ul li:hover >ul {
display: block;
}<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</li>
</ul>
</nav>JS FIDDLE：https：//jsfiddle.net/fhv7drst/
这是因为您的li元素是块元素。
我将其更改为内联，并且根据您的要求开始工作
HTML：
<li class="parentElement">
<input type="button" value="Button 1" name="nav_button" id="nav_button">
CSS：
li.parentElement{
display: inline;
}
这是工作的小提琴
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句