html - 親だけで最後の子要素または最初の子要素を選択する方法は? (css-html)

Question

last-child要素の選択に問題があります。
navbar 用に次のようなページを作成しました。

<nav>
    <ul>
        <li><a href="#">list numeber 1</a></li>
        <li><a href="#">list numeber 2</a>
            <ul>
                <li><a href="#">sub list item</a></li>
                <li><a href="#">sub list item</a></li>
                <li><a href="#">sub list item</a></li>
            </ul>
        </li>
        <li><a href="#">list numeber 3</a></li>
        <li><a href="#">Sign Out</a></li>
    </ul>
</nav>

次のようなcssを使用します。

nav {
    background: yellow;
}

ul {
    list-style: none;
}
li {
    padding: 10px 15px; 
    display: inline-block;
    position: relative;
}
ul li:last-child {
    float: right;
    background: #ddd;
}
ul li ul {
    display: none;
    position: absolute;
    background: #eee;
    top: 39px;
    left: 0;
}
ul li:hover ul {
    display: block;
}
ul li ul li {
    display: block;
}

Ul の last-child (Sing out) に BG を追加したいのですが、サブアイテムを見ると、その last-child が親のような背景を取得します。しかし、私は色を取得したくありません。どうすれば修正できますか...? クラス、ID、または JavaScript を使用したくありません。私はそこにいる方法...？

TNX