css+js实现下拉框带效果图

test.html

<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
                <option value ="https://www.baidu.com/">我们的课程记录</option>
                <option value ="跳转地址">Saab</option>
                <option value="跳转地址">Opel</option>
                <option value="跳转地址">Audi</option>
        </select>

test.js

 <!-- 顶部下拉菜单的动作函数 -->
    <script type="text/javascript">
        function MM_jumpMenu(targ, selObj, restore) {
            eval(targ + ".location='" + selObj.options[selObj.selectedIndex].value + "'");
            if (restore) selObj.selectedIndex = 0;
        }
    </script>

test.css

/*下拉框 */

#jumpMenu {
    background: #e6e5e5;
    font-size: 16px;
    border: solid 0px #000;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 14px;
}

效果图