隐藏<ul>在<li>之间徘徊时消失

Question

下面我隐藏<ul>，当<li>'更多'悬停在其上时会显示。

由于<li>的余量，<ul>在“额外”和<ul>之间悬停时消失 - 我该如何防止这种情况发生？

#container ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#container li {
  color: #fff;
  width: 80px;
  height: 60px;
  float: left;
  line-height: 60px;
  margin: 10px;
  background: black;
}
#container li a {
  display: block;
}
.extras:hover > ul.hidden {
  display: block;
}
ul.hidden {
  display: none;
}

<div id="container">
  <div class="center" style="text-align: center; display: inline-block;">
    <nav>
      <ul class="nav">
        <li>Example 1</li>
        <li>Example 2</li>
        <li class="extras">More
          <ul class="hidden">
            <li>Hoverable</li>
            <li>Hoverable</li>
            <li>Hoverable</li>
          </ul>
        </li>
        <li>Example 3</li>
        <li>Example 4</li>
      </ul>
    </nav>
  </div>
</div>

Answer 1

您的ul标记未达到高度。在这里试试这个

#container ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  float:left;
  width:100%;
}
#container li {
  color: #fff;
  width: 80px;
  height: 60px;
  float: left;
  line-height: 60px;
  margin: 10px;
  background: black;
}
#container li a {
  display: block;
}
.extras:hover > ul.hidden {
  display: block;
}
ul.hidden {
  display: none;
}

<div id="container">
  <div class="center" style="text-align: center; display: inline-block;">
    <nav>
      <ul class="nav">
        <li>Example 1</li>
        <li>Example 2</li>
        <li class="extras">More
          <ul class="hidden">
            <li>Hoverable</li>
            <li>Hoverable</li>
            <li>Hoverable</li>
          </ul>
        </li>
        <li>Example 3</li>
        <li>Example 4</li>
      </ul>
    </nav>
  </div>
</div>

Answer 2

使用float时，请务必记住设置父级的布局。

＆＃13;

＆＃13;

#container .center {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

#container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#container .nav:after {
  display: block;
  content: '';
  clear: both;
}

#container .nav > li {
  margin: 10px;
  float: left;
}

#container ul li {
  position: relative;
  line-height: 60px;
  background: black;
  cursor: pointer;
  height: 60px;
  color: #fff;
  width: 80px;
}

#container ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
}

#container ul ul li {
  margin-top: 10px;
}

#container ul li a {
  display: block;
}
.extras:hover > ul.hidden {
  display: block;
}
ul.hidden {
  display: none;
}

＆＃13;

<div id="container">
  <div class="center">
    <nav>
      <ul class="nav">
        <li>Example 1</li>
        <li>Example 2</li>
        <li class="extras">More
          <ul class="hidden">
            <li>Hoverable</li>
            <li>Hoverable</li>
            <li>Hoverable</li>
          </ul>
        </li>
        <li>Example 3</li>
        <li>Example 4</li>
      </ul>
    </nav>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;