Question

我试图制作一个倾斜的父div中的垂直导航。我的目标是让所有列表项都遵循与父div的边缘相同的路径，我不太确定如何去做。

我在codepen中输入了一个显示默认行为的示例。

<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

问题来自'忽略'li元素：如果li元素有另一个ul，那么整个块就会变得无法解锁。

您需要做的只是“忽略”li的内容，而不是li本身。假设您的所有文字都在a标记内，那么只需将您的'unskew'替换为：

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

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

嵌套列表与倾斜的父级排列在一起

1 个答案: