html - 如何在按钮悬停时显示列表？

我试图在按钮悬停时显示列表，但发生的情况是，每当我将鼠标悬停在按钮区域附近时，就会显示文本。

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

这是工作 fiddle

https://jsfiddle.net/m73p8pea/

关于html - 如何在按钮悬停时显示列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38681930/