How to remove antd design submenu chevron?

Question

I create a component using antd design with tailwindcss. I use vue, dropdown and menu. I cannot remove submenu chevron, beacuse chevron not one line. Here's my code.

<template>
  <a-dropdown :arrow="{ pointAtCenter: true }" :trigger="['click']">
    <div
      class="flex items-center pl-4 cursor-pointer transition-transform transform hover:scale-105"
    >
      <CaUserAvatarFilledAlt
        class="text-3xl text-gray-700 hover:text-gray-900 transition-colors duration-300"
      />
    </div>
    <template #overlay>
      <a-menu
        class="bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 w-64"
        arrow="{false}"
      >
        <a-menu-item
          key="settings"
          class="flex items-center p-2 hover:bg-blue-100 rounded-md transition-colors duration-300"
        >
          <div class="flex flex-row items-center" @click.prevent="openModal">
            <div class="mr-2">
              <SettingOutlined class="text-lg text-gray-600" />
            </div>
            <p class="ml-2 text-gray-900">Settings</p>
          </div>
        </a-menu-item>
        <a-sub-menu key="languages" class="text-gray-900">
          <template v-slot:title>
            <div
              class="flex items-center rounded-md py-1 transition-colors duration-300 flex-row"
              
            >
              <div class="mr-2">
                <HiLanguage class="text-lg text-gray-600" />
              </div>

              <p class="text-gray-900 ml-2">Change Language</p>
            </div>
          </template>

          <a-menu-item
            key="tm"
            @click.prevent="changeLocale('tm')"
            class="flex items-center p-2 hover:bg-blue-100 rounded-md transition-colors duration-300"
          >
            <div class="flex flex-row items-center">
              <div class="mr-2">
                <CountryFlag size="normal" country="tm" />
              </div>

              <p class="text-gray-900">Türkmen dili</p>
            </div>
          </a-menu-item>
          <a-menu-item
            key="ru"
            @click.prevent="changeLocale('ru')"
            class="flex items-center hover:bg-blue-100 rounded-md transition-colors duration-300"
          >
            <div class="flex flex-row items-center">
              <div class="mr-2">
                <CountryFlag size="normal" country="ru" class="" />
              </div>
              <p class="text-gray-900">Русский язык</p>
            </div>
          </a-menu-item>
          <a-menu-item
            key="en"
            @click.prevent="changeLocale('en')"
            class="flex items-center p-2 hover:bg-blue-100 rounded-md transition-colors duration-300"
          >
            <div class="flex flex-row items-center">
              <div class="mr-2">
                <CountryFlag size="normal" country="gb" />
              </div>

              <p class="text-gray-900">English</p>
            </div>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item
          key="logout"
          @click.prevent="logout"
          class="flex items-center p-2 hover:bg-red-100 rounded-md transition-colors duration-300"
        >
          <div class="flex flex-row items-center">
            <div class="mr-2">
              <LogoutOutlined class="text-lg text-red-600" />
            </div>

            <p class="ml-2 text-red-600">Logout</p>
          </div>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

I add more styles, but dont remove it. Help me.

Answer 1

You can add this CSS rule to your component's style block or in your global CSS file:

<style>
.ant-menu-submenu-arrow {
  display: none;
}
</style>