# Menu Tree styling

**URL:** <https://forum.inductiveautomation.com/t/menu-tree-styling/101942>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [February 6, 2025, 1:59am UTC](https://forum.inductiveautomation.com/t/menu-tree-styling/101942 "2025-02-06T01:59:56Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\
**Post date:** [February 6, 2025, 1:59am UTC](https://forum.inductiveautomation.com/t/menu-tree-styling/101942/1 "2025-02-06T01:59:56Z")

</div>

I have created a perspective style class for the menu tree items, it's working in on the main menu items, however it partially works on the sub menu items. Also, I can't figure out how to remove the on hover highlight on the sub menu items.

```python
/* Menu */
.psc-ali_menu_items {
    color: var(--color-label-0);
    border: none;
    font-weight: 500;
    font-size: 18px;
    display: inline-block;
    position: relative;
}

.psc-ali_menu_items:hover {
   color: var(--color-select);
   font-weight: bold;
}

.psc-menu_items::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    background: var(--color-select);
    width: 0;
    height: 2px;
    transition: width 500ms;
}

.psc-menu_items:hover::after {
    width: 100%;
}

```

Also, I was wondering if it's possible to change the color of the label icon and nav icon on hover using css without scripting, because when I create a class for th icon, I have to hover over the icon specifically, but if I only hover on the item, only the label is affected by any css :hover effect.

 ![Screenshot from 2025-02-06 05-58-40](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/7/27cf6ef1e015e7b3de3edc41b7f53cfd13a3e381.png)  
 ![Screenshot from 2025-02-06 05-58-57](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/d/8d704fa80afbcdf6817d7eabdd1a2a8cd4bf52ef.png)