时间戳

首页 > 解决方案 > 如何制作子导航栏两到三列

css - 如何制作子导航栏两到三列

问题描述

嗨，我正在尝试克隆 cointelegraph.com 的导航栏，但是，我不擅长 CSS，这是我正在尝试完成cointelegraph的照片

普罗特拉达

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

标签： csswordpressresponsive-designthemesnavbar

解决方案

您可以尝试使用 css 网格。这会将导航项目定位到三列网格中

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>

推荐阅读