element 的菜单导航菜单设置了选中高亮和悬停显示的样式，想点击直接显示高亮样式

Element UI 的菜单导航组件默认点击菜单项时会添加 `active` 类来标识当前选中的菜单项，而鼠标悬停时则会添加 `hover` 类来标识当前鼠标悬停的菜单项。如果你想让点击菜单项时直接显示高亮样式，可以使用 `default-active` 属性来设置默认选中的菜单项。

例如，以下是一个简单的示例代码：

<template>
  <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
    <el-menu-item index="1">菜单项1</el-menu-item>
    <el-menu-item index="2">菜单项2</el-menu-item>
    <el-menu-item index="3">菜单项3</el-menu-item>
  </el-menu>
</template>

<style>
  .el-menu-demo .el-menu-item--active,
  .el-menu-demo .el-menu-item--active:hover {
    background-color: #409EFF;
    color: #fff;
  }
</style>

在上面的代码中，我们使用 `default-active="1"` 属性来设置默认选中第一个菜单项。同时，我们使用 CSS 来定义 `active` 和 `hover` 样式，以实现菜单项选中时的高亮效果。注意，我们同时设置了 `active` 和 `hover` 样式，这样在点击菜单项时也会直接显示高亮样式。

希望这个回答对你有帮助！