嵌套列表与倾斜的父亲排队

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