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

Share Improve this question Follow edited Sep 10, 2019 at 13:15 matteogll asked Sep 10, 2019 at 12:57 matteogllmatteogll 95111 gold badge1111 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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
  }
}