嵌套列表與傾斜的父親排隊

Question

我試圖做一個垂直導航是在傾斜父母的div。我的目標是讓所有列表項都沿着父div邊緣的相同路徑行進，我不太確定如何去做。

我在codepen中鍵入了一個示例，顯示了默認行爲。

http://codepen.io/anon/pen/YWYQmd

<div class="parent"> 
    <ul class="navigation"> 
    <li><a>text</a></li> 
    <li><a>text</a></li> 
    <li><a>menu</a> 
     <ul class="submenu"> 
     <li><a>text</a></li> 
     <li><a>text</a></li> 
     <li><a>menu</a> 
      <ul class="submenu"> 
      <li><a>text</a></li> 
      <li><a>text</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    </ul> 
</div> 

.parent { 
    background: rgba(123,23,55,0.2); 
    width: 500px; 
    text-align: right; 
    transform: skew(-20deg); 
} 
ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
li { 
    transform: skew(20deg); 
} 
.submenu{ 
    transform: skew(-20deg); 
} 

任何提示，使其排隊像我想要的嗎？謝謝！

Answer 1

問題來自'unskewing'li元素：在li元素具有另一個ul的情況下，則整個塊變爲未糾纏。

您需要做的僅僅是'偏斜'li的內容，而不是li本身。假設所有文本將是一個a標籤內，則只需更換你的「unskew」有：

li a{ 
    display: inline-block; 
    transform: skew(20deg); 
} 

見結果在這裏：http://codepen.io/anon/pen/VjyzYq