1. 首頁
  2. 問答
  3. 只有CSS的菜單子菜單

只有CSS的菜單子菜單

2015-09-16 125 views
1

我想使用css創建菜單子菜單概念。它沒有按預期工作。預期輸出A-> A1 - > A1-1，對於其他元件也是如此。這是我到目前爲止所嘗試的。現在1級子菜單正在工作。只有CSS的菜單子菜單

我試着相同申請成爲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>

來源

2015-09-16 Shafeeque

+0

何不你好ou使用ul> li？ – guvenckardas

+0

@guvenckardas就我而言，我無法使用ul。它應該是div，並且div – Shafeeque

+0

http://jsfiddle.net/4hhgjaus/中可能還有其他元素，您也可以查看這一個 – guvenckardas

回答

2

它很難只用CSS來製作它，因爲它不支持像點擊等等，你的問題的事件，你鬆:focus狀態，所以你需要保持你的.blade股利存活的另一種方式，我的想法是在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>

來源

2015-09-16 11:04:39

0

工作懸停版本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>

來源

2015-09-16 11:09:25 guvenckardas

相關問題

 相關問題