如何将子导航栏设置为两列到三列

Question

你好，我正在尝试克隆cointelegraph。com的导航栏，然而，我不擅长CSS这是我想要完成的事情的照片。

Protrada

目标是当用户悬停在导航栏上而不是完整的下拉菜单时，子类别将分为三个。

Answer 1

你可以尝试使用css grid。这将把导航项定位到一个三列网格

nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

<nav>
<a href="">Item 1</a>
<a href="">Item 2</a>
<a href="">Item 3</a>
<a href="">Item 4</a>
<a href="">Item 5</a>
<a href="">Item 6</a>
</nav>