I'm using Ant Design (antd) ponents library for Vue.js. The menu ponent is quite simple to use: /ponents/menu/

I just want to change the ":hover" color of links (from default blue to red), which is possible by overriding CSS classes. But is very difficult to me (avoid using ugly workarounds) to change also the color of the "submenu arrow", which remains blue.

Here is a simple example:

Anybody has already tried?

I'm using Ant Design (antd) ponents library for Vue.js. The menu ponent is quite simple to use: https://vue.ant.design/ponents/menu/

I just want to change the ":hover" color of links (from default blue to red), which is possible by overriding CSS classes. But is very difficult to me (avoid using ugly workarounds) to change also the color of the "submenu arrow", which remains blue.

Here is a simple example: https://codesandbox.io/embed/vue-antd-sub-menu-arrow-color-34vlx

Anybody has already tried?

• javascript
• css
• vue.js
• antd

2 Answers 2

Try with

.ant-menu-submenu-title:hover {
    .ant-menu-submenu-arrow::before, .ant-menu-submenu-arrow::after {
        background: red!important;
    }
}

But use lang="scss" on your style tag so you can pile scss or just fix my script with css syntax.

Try this within the style tag:

.ant-menu-submenu-arrow {
  ::before {
    background: red
  }
}