Question

我试图在按钮悬停时显示列表，但是当我在按钮区域附近悬停时，会显示文本。

.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/

Answer 1

这是因为您的li元素是块元素。

我将其更改为内联，并根据您的要求开始工作

HTML：

 <li class="parentElement"> 
                    <input type="button" value="Button 1" name="nav_button" id="nav_button">

CSS：

 li.parentElement{
    display: inline;
  }

这是工作小提琴

https://jsfiddle.net/m73p8pea/

Answer 2

原因是你的li元素是一个块元素，这意味着它会自动尝试跨越整个可用宽度。在您的情况下，这是最顶层元素提供的800px。

你有两个随时可用的解决方案 - 一个是使list元素成为一个内联块元素（或者只是一个内联元素，虽然我更喜欢这里的inline-block，因为block是如何开始的）以防止它的spaning整个宽度：

.header_nav ul li {
    display: inline-block;
}

当鼠标悬停在按钮上时，您也可以触发无序列表上的显示更改，而不是将鼠标悬停在其父列表项上时：

.header_nav #nav_button:hover + ul {
   display: block;
}

这可能是更好的解决方案，因为它不会超出您需要的显示类型，并且您可以更准确地描述您想要发生的事情 - 在按钮悬停时显示列表。

Answer 3

正如@Rahul Arora指出的那样，因为li是块元素。

但是如果由于某种原因你仍然希望将它保留为块元素，你可以通过将它作为inline-block来保留它。我还建议删除margin（请参阅inspect元素的给定示例，写入ul）和padding，默认情况下由浏览器分配。

以下是代码：

＆＃13;

  .header_nav
    {
      width:800px;
      height:400px;
    }
    .header_nav ul 
    {
      list-style:none;

      //displaying ul & all its child as inline block until overriden by other rules
      display:inline-block;
     
     //removing default margin and padding
      margin:0;
      padding:0;
    }
    .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;
    }

＆＃13;

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

＆＃13;

如何在按钮悬停上显示列表？

3 个答案: