html - CSS 嵌套导航，下一行有 child

Question

我想用 ul 和 li 构建一个嵌套导航，它也可以有子项。

当父 li 上有 ative 类时(该类是用 javascript 设置的 onclick)，子项应该出现在下一行。

只有当子列表有 position: absolut 时，我才设法做到这一点。不幸的是，它与以下内容重叠。

它是这样的:

我真的很想在不必使用 position: absolut 的情况下做到这一点，但想不出办法。

谁能帮帮我？

按照我的代码。

ul {
  list-style: none;
  padding: 0;
  position: relative
}

li {
  display: inline-block;
  border: 1px solid deeppink;
  margin: 5px 5px 0 5px;
}

ul ul {
  position: absolute;
  display: none;
  left: 0;
}

ul ul li {
  border: 0;
  border-bottom: 1px solid black;
}

ul li.isActive {
  background-color: yellow;
}

ul li.isActive ul {
  display: block;
}

span {
  padding: 5px;
}

<ul>
  <li>
    <span>top1</span>
  </li>
  <li class="isActive">
    <span>top2</span>
    <ul>
      <li>
        <span>sub1</span>
      </li>
      <li>
        <span>sub2</span>
      </li>
    </ul>
  </li>
  <li>
    <span>top3</span>
    <ul>
      <li>
        <span>other sub1</span>
      </li>
      <li>
        <span>other sub2</span>
      </li>
    </ul>
  </li>
</ul>
<span>
        Some text.
        </span>

Answer 1

这不是最动态的方式，也不是非常可扩展的方式，但您可以使用伪焦点，并且不需要为事件使用 JavaScript，并且您不想再使用我从您的评论中看到的任何 JS。 JSFiddle 在这里看到它在行动 https://jsfiddle.net/Le64we9s/1/

风格:

.clear{
  clear:both;
}

.content{
  margin-top:10px;
}

.main-link, .sub-link{
  color:#fff;
  text-decoration:none;
  padding:5px;
  display:inline-block;
  background:#2489f1;
}

.sub-link{
  background:#1d6dbf;
  display:none;
  margin-top:10px;
}

.main-link:focus{
  background:#65b1ff;
}

.main-link-1:focus ~ .sub-link-1, .main-link-2:focus ~ .sub-link-2, .main-link-3:focus ~ .sub-link-3, .main-link-4:focus ~ .sub-link-4{
  display:inline-block;
}

每次添加新的主菜单选项卡和子菜单时，您都必须添加 .main-link-(number here):focus ~ .sub-link-(same number here) .

HTML:

<div>
    <a href="#" class="main-link main-link-1">Main 1</a>
    <a href="#" class="main-link main-link-2">Main 2</a>
    <a href="#" class="main-link main-link-3">Main 3</a>
    <a href="#" class="main-link main-link-4">Main 4</a>

    <div class="clear"></div>

    <a href="#" class="sub-link sub-link-1">Sub Menu 1</a>
    <a href="#" class="sub-link sub-link-1">Sub Main 1</a>
    <a href="#" class="sub-link sub-link-1">Sub Main 1</a>
    <a href="#" class="sub-link sub-link-1">Sub Main 1</a>

    <a href="#" class="sub-link sub-link-2">Sub Menu 2</a>
    <a href="#" class="sub-link sub-link-2">Sub Main 2</a>
    <a href="#" class="sub-link sub-link-2">Sub Main 2</a>
    <a href="#" class="sub-link sub-link-2">Sub Main 2</a>

    <a href="#" class="sub-link sub-link-3">Sub Menu 3</a>
    <a href="#" class="sub-link sub-link-3">Sub Main 3</a>
    <a href="#" class="sub-link sub-link-3">Sub Main 3</a>
    <a href="#" class="sub-link sub-link-3">Sub Main 3</a>

    <a href="#" class="sub-link sub-link-4">Sub Menu 4</a>
    <a href="#" class="sub-link sub-link-4">Sub Main 4</a>
    <a href="#" class="sub-link sub-link-4">Sub Main 4</a>
    <a href="#" class="sub-link sub-link-4">Sub Main 4</a>
</div>

<div class="content">
  content here
</div>

您需要使用标签才能使焦点伪工作。