Выпадающий список CSS

У меня есть раскрывающийся список CSS, который дает мне список опций.
Вот HTML:

<ul class="dropdown">
    <li><span class="thisChoice">-choose wisely-</span>
        <ul>
            <li>Choice One</li>
            <li>Choice Two</li>
            <li>Choice Three</li>
        </ul>
    </li>
</ul>

И вот CSS:

ul ul{
    display: none;
}
ul li:hover > ul{
    display: block;
}

Когда вы нажимаете на параметр, JavaScript меняет текст в теге на текст выбранного вами варианта.
Мой вопрос в том, есть ли способ, чтобы выпадающее меню снова рухнуло, как только вы нажали на свой выбор?

1. Я попытался использовать jQuery для изменения CSS для внедренной ul, но он полностью нарушает функциональность.
2. Я попытался использовать document.getElementById("anythingElse"). Focus(), чтобы попытаться заставить CSS думать, что мышь отошла от раскрывающегося списка.

Лучшее решение, или, по крайней мере, то, на что я надеюсь, - это тот, который заставит браузер подумать, что мышь ушла из выпадающего списка достаточно долго, чтобы скрытая скрытая скрыта.