右对齐列表项，同时将它们保持在不同的行上

Question

我正在尝试对齐网页右下角的一些列表项，每个列表项的文本右对齐并且每个列表项的宽度适合内容，以便它只在它打开时激活悬停效果实际的话。但是，我无法让它达到我想要的效果。

我认为可以解决的问题： 如果我从列表项中删除

width: fit-content;

字段，然后添加

text-align: right;

它在视觉上看起来是正确的。但是，它会在列表项宽度的任何位置激活悬停效果。此外，如果我尝试将

float: right;

添加到列表项中，那么它们将不再在各自的行中，而是在同一行中聚集在一起。

下面是我正在处理的问题的一些样板代码：

<div class="main">
    <div class="selects">
        <ul>
            <li>ABOUT</li>
            <li>ME</li>
            <li>CONTACT</li>
        </ul>
    </div>
</div>
<style>
    html,
    body {
        height: 100%;
    }

    html, body, .selects, .selects ul, .selects ul li {
        margin: 0;
        padding: 0;
    }

    .main {
        font-size: 10vw;
        width: 90%;
        margin-left: 5%;
        position: absolute;
        bottom: 0;
    }

    .selects {
        position: absolute;
        bottom: 20px;
        right: 0;
    }

    .selects ul {
        list-style-type: none;
    }

    .selects ul li {
        vertical-align: bottom;
        /* 
        This is the field I thought would fix it.
        width: fit-content;
        */
        transition: color 0.5s;
        text-align: right;
    }

    .selects ul li:hover {
        color: #ae2e2e;
        cursor: pointer;
    }
</style>

我尝试实现以下代码：

.selects ul li {
    vertical-align: bottom;
    width: fit-content; /* This */
    float: right; /* And this */
    transition: color 0.5s;
}

但是，“我”和“关于”列表项然后组合在同一行。