How to override CSS :hover?

The first rule overrides it because of CSS specificity, i.e. it's more specific.

Change second rule to:

ul li.disabled, ul li.disabled:hover{
    color:grey;
}

Change your CSS To:

ul li:hover{
    color:red;
}

.disabled ,.disabled:hover{
    color:grey;
}

See this fiddle

Updating for the 2020s, you can now use :not to your advantage

.disabled {
    color:grey;
}

ul li:not(.disabled):hover{
    color:red;
}

<ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

Related