列表自身崩溃？

Question

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

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

单击列表 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 之后清除浮点数？但似乎没有帮助。

谢谢！

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

Answer 2

您的 JSFiddle 中出现了一些奇怪的选择。

None-少，别飘.indside。不知道为什么它一开始就被浮动了。当你浮动和项目时，你将它从正常的文档流中取出，它不再像浮动之前那样占用 space。这意味着父元素会将其视为不存在。

如果你想做一个弹出式菜单，那么你应该在下拉菜单上使用 position: absolute; 并在它的包含元素上使用 position: relative;。

下面是基本的弹出式菜单。

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  width: 300px;
  background-color: #f1f1f1;
}
li {
  position: relative;
  line-height: 1.5;
}
li:hover {
  background-color: #ccc;
  cursor: pointer;
}
li:hover > ul {
  display: block;
}

li > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #eee;
}

<ul>
  <li>One</li>
  <li>Two
    <ul>
      <li>Two A</li>
      <li>Two B</li>
    </ul>
  </li>
  <li>Three</li>
</ul>

列表自身崩溃？

List Collapsing on itself?

html

css

focus

menu

HTML

CSS