html - 列表自身崩溃？

Question

我最近一直在使用 tabindex="1"和 :focus 和 div 在我的菜单中制作下拉列表。

但是当点击这些下拉列表时，它们会使我下面的链接自行折叠，有人知道为什么吗？

这是例子https://jsfiddle.net/ugjgng5u/4/

单击列表 1 时，下面的所有链接都会收缩和折叠。

<li class=collapse tabindex="1"><a class=red>&nbsp;List 1 </a> 
<div class="inside">Content 1....<br>
hi<br>
hi<br>
hi<br>
hi</div></li>

我以为是清除div后的 float ？但似乎没有帮助。

谢谢!

Answer 1

如果非要我猜的话，那是因为 li 位于菜单内，您无法将其分离。解决方法是使 div 成为绝对的。

https://jsfiddle.net/ugjgng5u/7/

HTML

<div id=container>
  <div id=top-bar>
    <div class=top-links>
      <toplinks>
        <ul id=menu>
          <li><a>A&nbsp;</a></li>
          <li class=collapse tabindex="1">
            <a class=red>&nbsp;List 1 </a>
            <div class="inside">Content 1....
              <br> hi
              <br> hi
              <br> hi
              <br> hi
            </div>
          </li>
          <li> <a> C</a></li>
          <li><a>B&nbsp;</a></li>
        </ul>
      </toplinks>
    </div>
  </div>
</div>

CSS

#container {
  background-color: #fff;
  max-width: 350px;
  z-index: 1;
  position: relative;
}
#top-bar {
  display: block;
  position: relative;
  height: auto;
  line-height: 1.7;
  font-size: 16px;
  font: Arial, Helvetica, sans-serif;
}
.top-links li a:hover {
  color: #808080;
}
.top-links li ul {
  display: none;
}
.top-links li ul li {
  display: block;
  float: none;
}
.top-links ul li a:hover + .hidden,
.hidden:hover {
  display: block;
}
.top-links li > a {
  display: block;
  font-size: 12px;
  font-weight: 600;
  height: 44px;
  color: #999;
  text-decoration: none;
}
li.collapse > a {
  cursor: pointer;
  display: block;
}
li.collapse:focus {
  outline: none;
}
li.collapse > div.inside {
  display: none;
}
li.collapse:focus div.inside {
  display: block;
}
.inside {
  z-index: 10;
  position: absolute;
  top: 40%;
  left: 11%;
  background: white;
  width: 300px;
  padding-left: 20px;
  border: 1px solid black;
}