通过css 样式设置element 导航测试的高亮和悬停效果，如何让点击某个菜单的时候直接显示高亮效果，不显示悬停效果

要让 Element UI 的导航菜单在点击菜单时直接显示高亮效果，可以使用 `default-active` 属性来设置默认选中的菜单项，而不使用 `default-openeds` 属性来设置默认展开的子菜单。

以下是一个示例代码：

<template>
  <el-menu class="el-menu-demo" :default-active="activeIndex" 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>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

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

在上面的代码中，我们使用 `:default-active="activeIndex"` 属性来设置默认选中的菜单项为第一个，而不使用 `default-openeds` 属性来设置默认展开的子菜单。同时，我们使用 CSS 来定义选中时的高亮样式，以实现点击菜单项时直接显示高亮效果。

注意，我们只设置了 `active` 样式，而没有设置 `hover` 样式，这样在鼠标悬停时不会出现高亮效果。

希望这个回答能够帮到你！