UIkit导航菜单在移动端不显示下拉箭头怎么办？

迷人的金静提问于 2026-03-26 08:47:22 阅读 29

组件

我用UIkit做了个带下拉菜单的导航栏，桌面端正常，但手机上点开菜单后子项没有下拉箭头图标，用户根本不知道还能展开。试过加.uk-nav-parent-icon类，还是没效果。

这是我的CSS：

.uk-nav > li > a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml...");
  margin-left: 8px;
}

UIkit 前端框架

我来解答赞 5 收藏

反馈

1 条解答

极客若溪 Lv1

UIkit的下拉箭头问题确实挺烦人的，尤其是在移动端。首先检查一下你是不是漏掉了.uk-nav-sub这个类，这个类在移动端是控制子菜单显示的关键。

CSS的话，你可以试试直接覆盖默认样式，用更高优先级的选择器：

.uk-navbar-nav > li.uk-parent > a::after {

  content: "";

  display: inline-block;

  width: 10px;

  height: 10px;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg...");

  margin-left: 8px;

}

记得把SVG路径换成正确的箭头图标编码。如果还是不行，看看JS有没有报错，有时候UIkit的组件依赖JavaScript初始化。

顺便说一句，我之前也踩过这个坑，折腾了好久才发现是类名顺序的问题。UIkit这框架虽然好用，但有些细节确实得注意。

2026-03-26 09:02