css - 嵌套列表与倾斜的父级对齐

我正在尝试在倾斜的父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);
}

有什么提示可以使其像我想要的那样排列吗？谢谢！

最佳答案

问题来自“取消倾斜” li元素：如果li元素具有另一个ul，则整个块将变得不倾斜。

您需要做的是仅“歪曲” li的内容，而不是“ li”本身。假设所有文本都在a标记内，则只需将“歪斜”替换为：

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

在此处查看结果：http://codepen.io/anon/pen/VjyzYq

关于css - 嵌套列表与倾斜的父级对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38387458/