I am creating a list using HTML and CSS. What I am trying to achieve is all the elements will be black until they are hovered on. When hovered, all elements except the hovered text will change color. I am attaching my code; it would be helpful if anyone could point out the mistake or tell me why it's not working.
.sub-menu-mast { line-height: 30px; background-color: rgb(254, 254, 254); width: 9rem; cursor: pointer;}.sub-menu-mast>li>a { color: black; position: relative; left: 10%;}.sub-menu-mast a:not(:hover) { color: red;}<nav><ul><li><a>XYZ </a><ul class="sub-menu-mast"><li><a href="">Track</a></li><li><a href="">Return</a></li></ul></li></ul></nav>