Question

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

我尝试将其应用为this link

arr[0] = 100;
arr[1] = 100;
arr[2] = 100;
arr[3] = 10;

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: