html - 選択: ホバーが機能しない

Question

マウスオーバーで開くcssドロップメニューがあり、メニュー内には選択ボックスもあります。問題は、選択ボックスをクリックするたびにメニューが消えることです。

私が試したことは追加することです#year-select select:hover,

メニューを開くCSS

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#year-select select:hover,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

html

<select name="year-select" ONCHANGE="location = this.options[this.selectedIndex].value;">
        <option value="2012">
...
</select>

http://jsfiddle.net/B9eUM/