Question

我最近一直在使用tabindex =＆＃34; 1＆＃34;并且：使用div来关注我的菜单中的下拉列表。

但是当点击这些下拉列表时，他们会让我的链接在下面崩溃，有人知道为什么吗？

单击列表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中有一些奇怪的选择。

尽管如此，不要漂浮.indside。不知道为什么它开始浮动。浮动和项目时，您将其从正常文档流中取出，它不再像浮动之前那样占用空间。这意味着父元素会将其视为不存在。

如果您要执行弹出式菜单，则应在下拉菜单中使用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>

列表折叠自己？

2 个答案:

HTML

CSS