仅带有 CSS 的菜单子菜单答案

【问题标题】：Menu Submenu only with CSS仅带有 CSS 的菜单子菜单
【发布时间】：2015-09-16 10:49:32
【问题描述】：

我想只使用 css 创建菜单子菜单概念。它没有按预期工作。预期输出 A-> A1 -> A1-1 ，其他元素也一样。这是我到目前为止所尝试的。现在 1 级子菜单正在运行。

我尝试申请和this link一样

.list_item {
  padding: 5px;
}
.blade {
  height: 400px;
  width: 200px;
  border: 1px solid;
  position: absolute;
  top: 0;
  background: #ddd;
  z-index: 1000;
}
.blade .blade {
  display: none;
  left: 190px;
}
.list_item a:active + div.blade,
.list_item a:focus + div.blade,
.list_item a:hover {
  display: block;
}

<div class="blade ng-scope">


  <div class="list_item ng-scope">
    <a class="item_a ng-binding" tabindex="0">A</a>

    <div class="blade ng-scope">


      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">A1</a>

        <div class="blade ng-scope">


          <div class="list_item ng-scope">
            <a class="item_a ng-binding" tabindex="0">A1-1</a>

            <div class="blade ng-scope">


              <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1-1 - 1</a>
              </div>

              <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1-1 - 2</a>
              </div>

              <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1-1 - 3</a>
              </div>

              <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1-1 - 4</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">A2</a>

        <div class="blade ng-scope">


          <div class="list_item ng-scope">
            <a class="item_a ng-binding" tabindex="0">A2-1</a>
          </div>
        </div>
      </div>

      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">A3</a>
      </div>
    </div>
  </div>

  <div class="list_item ng-scope">
    <a class="item_a ng-binding" tabindex="0">B</a>

    <div class="blade ng-scope">


      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">B1</a>
      </div>

      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">B2</a>
      </div>
    </div>
  </div>

  <div class="list_item ng-scope">
    <a class="item_a ng-binding" tabindex="0">C</a>
  </div>
</div>

【问题讨论】：

为什么不用ul>li？
@guvenckardas 在我的情况下，我不能使用 ul。它应该是 div 并且 div 内可能还有其他元素
jsfiddle.net/4hhgjaus你也可以看看这个

标签： html css focus

【解决方案1】：

仅使用 css 很难做到，因为它不支持 click 等事件，你的问题是，你失去了 :focus 状态，所以你需要让你的 .blade div 以另一种方式保持活力，我的想法是在 div 本身上使用:hover，如果有良好的 html 组织，它会工作得很好：注意这在某些手机上不起作用，因为它们不支持:hover伪类

.list_item {
  padding: 5px;
}
.blade {
  height: 400px;
  width: 200px;
  border: 1px solid;
  position: absolute;
  top: 0;
  background: #ddd;
  z-index: 1000;
}
.blade .blade {
  display: none;
  left: 190px;
}
.list_item div.blade:hover,
.list_item a:active + div.blade,
.list_item a:focus + div.blade,
.list_item a:hover {
  display: block;
}

<div class="blade ng-scope">


  <div class="list_item ng-scope">
    <a class="item_a ng-binding" tabindex="0">A</a>

    <div class="blade ng-scope">


      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">A1</a>

        <div class="blade ng-scope">


          <div class="list_item ng-scope">
            <a class="item_a ng-binding" tabindex="0">A1-1</a>

            <div class="blade ng-scope">


              <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1-1 - 1</a>
              </div>

              <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1-1 - 2</a>
              </div>

              <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1-1 - 3</a>
              </div>

              <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1-1 - 4</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">A2</a>

        <div class="blade ng-scope">


          <div class="list_item ng-scope">
            <a class="item_a ng-binding" tabindex="0">A2-1</a>
          </div>
        </div>
      </div>

      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">A3</a>
      </div>
    </div>
  </div>

  <div class="list_item ng-scope">
    <a class="item_a ng-binding" tabindex="0">B</a>

    <div class="blade ng-scope">


      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">B1</a>
      </div>

      <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">B2</a>
      </div>
    </div>
  </div>

  <div class="list_item ng-scope">
    <a class="item_a ng-binding" tabindex="0">C</a>
  </div>
</div>

【讨论】：

【解决方案2】：

工作悬停版DEMO

   .list_item {
        padding: 5px;
    }
    .blade {
        height: 400px;
        width: 200px;
        border: 1px solid;
        position: absolute;
        top: 0;
        background: #ddd;
        z-index: 1000;
    }
    .blade .blade {
        display: none;
        left: 190px;
    }


    .list_item:hover{
        cursor: pointer;
    }

    .list_item:hover  > div.blade {
        cursor: pointer;
        display: block;
    }

html:

<div class="blade ng-scope">


    <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">A</a>

        <div class="blade ng-scope">


            <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A1</a>

                <div class="blade ng-scope">


                    <div class="list_item ng-scope">
                        <a class="item_a ng-binding" tabindex="0">A1-1</a>

                        <div class="blade ng-scope">


                            <div class="list_item ng-scope">
                                <a class="item_a ng-binding" tabindex="0">A1-1 - 1</a>
                            </div>

                            <div class="list_item ng-scope">
                                <a class="item_a ng-binding" tabindex="0">A1-1 - 2</a>
                            </div>

                            <div class="list_item ng-scope">
                                <a class="item_a ng-binding" tabindex="0">A1-1 - 3</a>
                            </div>

                            <div class="list_item ng-scope">
                                <a class="item_a ng-binding" tabindex="0">A1-1 - 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A2</a>

                <div class="blade ng-scope">


                    <div class="list_item ng-scope">
                        <a class="item_a ng-binding" tabindex="0">A2-1</a>
                    </div>
                </div>
            </div>

            <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">A3</a>
            </div>
        </div>
    </div>

    <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">B</a>

        <div class="blade ng-scope">


            <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">B1</a>
            </div>

            <div class="list_item ng-scope">
                <a class="item_a ng-binding" tabindex="0">B2</a>
            </div>
        </div>
    </div>

    <div class="list_item ng-scope">
        <a class="item_a ng-binding" tabindex="0">C</a>
    </div>
</div>

【讨论】：