给我写一个使用html和elementUI写的横排导航栏的代码

好的，下面是一个使用HTML和ElementUI写的横排导航栏的代码：

<template>
  <div>
    <el-menu
      mode="horizontal"
      :default-active="$route.path"
      class="el-menu-demo"
      @select="handleSelect"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>
      <el-menu-item index="/contact">联系我们</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    },
  };
</script>

<style>
  .el-menu-demo {
    background-color: #f8f8f9;
  }
  .el-menu-demo .el-menu-item {
    padding: 0 20px;
  }
</style>

以上代码使用了ElementUI的`el-menu`和`el-menu-item`组件来创建横排导航栏。其中`mode="horizontal"`属性用于指定导航栏为横排模式，`:default-active="$route.path"`属性用于高亮当前选中的导航项，`@select="handleSelect"`属性用于监听导航项的选择事件。在`el-menu-item`标签中，`index`属性用于指定导航项对应的路由路径，导航项的文本内容则放置在标签内部。最后，使用CSS样式对导航栏进行了简单的美化。