导航内容超出宽度 溢出隐藏导致鼠标悬停展示下级失效

Question

导航内容超出宽度 溢出隐藏导致鼠标悬停展示下级失效 原因是使用了overflow属性 如何能解决这个问题 导航采用el-menu导航和子级无法分开写 所以无法通过子级写在导航之外通过定位展示 只能改变内容超出隐藏的方法 有什么办法

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

导航内容超出宽度溢出隐藏导致鼠标悬停展示下级失效

你遇到的问题是，使用 el-menu 导航时，内容超出宽度导致溢出隐藏，鼠标悬停展示下级失效。这个问题是因为 el-menu 使用了 overflow 属性来实现溢出隐藏。

解决这个问题有以下几种方法：

1. 使用 el-menu 的 ellipsis 属性，设置为 false，这样可以禁用溢出隐藏。

<el-menu :ellipsis="false">
  <!-- 菜单项 -->
</el-menu>

1. 使用 CSS 设置 overflow 属性为 visible，这样可以让溢出内容可见。

.el-menu {
  overflow: visible;
}

1. 使用 el-menu 的 scrollable 属性，设置为 true，这样可以让菜单项滚动。

<el-menu scrollable="true">
  <!-- 菜单项 -->
</el-menu>

1. 使用 JavaScript 设置 el-menu 的 scrollWidth 属性，设置为 Infinity，这样可以让菜单项无限滚动。

const menu = document.querySelector('.el-menu');
menu.scrollWidth = Infinity;

这些方法可以解决溢出隐藏导致鼠标悬停展示下级失效的问题。但是，需要根据实际情况选择合适的解决方法。