固定宽度CSS水平菜单超出6项自动归入下拉菜单的实现方案

可以仅使用CSS实现该需求，无需修改现有循环逻辑，仅需给外层ul添加自定义类名即可，兼容方案可配合极少量Blade调整适配低版本浏览器，具体实现步骤如下：

步骤1：基础调整（可选，兼容老浏览器） #

如果需要兼容Firefox 121以下、Chrome 105以下版本，可先调整Blade模板逻辑，提前判断菜单项总数，添加标记类：

@php
// 把原来的缓存逻辑提出来单独赋值
$categories = \Illuminate\Support\Facades\Cache::remember('filter-category-u', 60 * 30, fn () => \App\Models\Category::all()->keyBy('slug'));
$hasExtraItems = $categories->count() > 6;
@endphp
<!-- 给ul添加自定义类和多余项标记类 -->
<ul class="category-menu {{ $hasExtraItems ? 'has-extra' : '' }}">
    @foreach($categories as $key => $category)
    <li>
        <a class="@if(route_human_value('browse', 'category') == $key) active @endif" href="{{ route_human('browse', ['category' => $key]) }}">
            {{ $category->name }}
        </a>
    </li>
    @endforeach
</ul>

如果只需要兼容现代浏览器，不需要修改Blade代码，仅需给原有的ul添加category-menu类即可。

步骤2：添加CSS样式 #

/* 菜单基础样式 */
.category-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
  gap: 24px; /* 菜单项间距可自行调整 */
}

.category-menu li {
  white-space: nowrap;
}

/* 前6个菜单项正常显示 */
.category-menu li:nth-child(-n + 6) {
  display: block;
}

/* 第7个及之后的菜单项默认隐藏 */
.category-menu li:nth-child(n + 7) {
  display: none;
}

/* 存在多余项时显示三点触发按钮 */
/* 现代浏览器无需修改Blade的话，把下面的.has-extra替换成:has(li:nth-child(7))即可 */
.category-menu.has-extra::after {
  content: "...";
  cursor: pointer;
  padding: 0 8px;
  font-size: 18px;
  font-weight: bold;
  user-select: none;
}

/* hover或点击三点时展开下拉菜单 */
.category-menu.has-extra:hover li:nth-child(n + 7),
.category-menu.has-extra:focus-within li:nth-child(n + 7) {
  display: block;
}

/* 下拉菜单容器定位，以第7个菜单项为容器基准 */
.category-menu li:nth-child(7) {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 140px;
  padding: 6px 0;
  z-index: 999;
  display: grid;
}

/* 下拉菜单项样式调整 */
.category-menu li:nth-child(n + 7) a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
}

.category-menu li:nth-child(n + 7) a:hover {
  background: #f3f4f6;
}

方案说明 #

• 纯CSS实现版本依赖CSS :has选择器，2023年之后发布的主流浏览器均已支持，无需修改业务逻辑
• 兼容低版本浏览器的方案仅添加了一行PHP计数判断，无额外性能损耗
• 默认支持hover展开、点击展开后点击页面其他区域自动收起的交互，符合常规下拉菜单使用习惯

内容的提问来源于stack exchange，提问作者TheBiker