下拉菜单显示效果

Question

I have a dropdown button that display 2 options when clicked I want the option to display like fading in and out when the dropdown is clicked.

HTML

<select name="lang_choice" id="lang_choice">
    <option value="da" selected="selected">Dansk</option>
    <option value="en">English</option>

</select>

CSS

select
{
    background: #E6E0D0;
    color: #694a31;
    width: 100px;
}

i tried to add this to my css but nothing happens also tried the opacity 0 > 1 when display but it doesn't affect the menu.

    -webkit-transition: opacity .5s ease-in-out;
       -moz-transition: opacity .5s ease-in-out;
        -ms-transition: opacity .5s ease-in-out;
         -o-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;

sample fiddle

Answer 1

Well you can try jQuery animation, but it seems that opacity only affects the option text and not the block where it is stored.

jsfiddle: http://jsfiddle.net/2dvcam8f/5/

new jsfiddle with better animation: http://jsfiddle.net/2dvcam8f/9/

If you want smooth drop downs you should use plugins, for example the one @Rushee posted.