Menu control element structure
Customizing Menu using its CSS classes
Menu provides a set of CSS classes which help its users to customize it based on their requirement. You can customize the appearance of the Menu by overriding the existing styles. The following list of CSS class names can be used to customize the Menu component.
Class Name | Description |
.e-menu-wrap | Applied to Menu’s wrapper element. |
.e-menu | Applied to Menu’s ul element |
.e-list | Applied to menu item list elements |
.e-menulink | Applied to menu item’s <a> tag element |
.e-arrowhead-down | Applied to arrow down span element |
.e-arrowhead-down:before | Applied to arrow down icon |
.e-arrowhead-right | Applied to arrow right span element |
.e-arrowhead-right:before | Applied to arrow right icon |
.e-menu.e-horizontal .e-list>ul | Applied to horizontal sub menu’s ul element |
.e-menu > li | Applied to all li elements inside the Menu |
.e-list.e-mhover | Applied to hovering li element |
.e-list.e-mhover>.e-menulink | Applied to hovering menu item |
.e-menu.e-horizontal .e-list.e-active | Applied to active item of menu |
.e-menu.e-horizontal .e-mfocused | Applied to focused li element |
