仅包含 CSS 的菜单子菜单

Question

我只想使用 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>

Answer 1

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

.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>

Answer 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>

仅包含 CSS 的菜单子菜单

Menu Submenu only with CSS

html

css

focus