需要在桌面上彼此相邻且大小相等地显示的嵌套导航项

Question

我有一个奇怪的情况，即深度嵌套的导航项，每个级别（最多 3 个）都需要显示在彼此相邻的相等框中，就好像它们在视觉上没有嵌套一样。 结构不能改变。 可以有网格或任何其他 CSS 解决方案吗？

<ul class="subcategory level-1">
  <li>
    Some link
    <ul class="subcategory level-2">
      <li>Some link</li>
      <li>Some link</li>
      <li>
        Some link
        <ul class="subcategory level-3">
          <li>Some link</li>
          <li>Some link</li>
          <li>Some link</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Some link
    <ul class="subcategory level-2">
      <li>Some link</li>
      <li>Some link</li>
      <li>
        Some link
        <ul class="subcategory level-3">
          <li>Some link</li>
          <li>Some link</li>
          <li>Some link</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Some link
    <ul class="subcategory level-2">
      <li>Some link</li>
      <li>Some link</li>
      <li>
        Some link
        <ul class="subcategory level-3">
          <li>Some link</li>
          <li>Some link</li>
          <li>Some link</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

一些链接

Answer 1

试试这个：

https://jsfiddle.net/3qyfm0wt/1/

它不会显示在单行中，而是显示在均匀的网格中。

#main-list{
    list-style: none;
    width: 780px;

}

#main-list li{
    width: 193px;
    height: 70px;
    float: left;
    background-color: #cccccc;
    margin: 0;
    padding: 0;
    border: 1px white solid;
}

#main-list ul{
    list-style: none;
}

#main-list ul li{
    background-color: green;
    margin: 0;
    padding: 0;
}

#main-list ul { padding: 0px;}