ul-li（div）下拉列表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ul-li的下拉列表</title><style>#sel {display: table-cell;}ul#ul {list-style: none;border: 1px solid #ccc;background-color: #fff;display: table-cell;margin: 0;padding: 0;}ul#ul li {height: 22px;line-height: 22px;}ul#ul li:focus {min-height: 1.2em;}ul#ul li:hover {background-color: rgba(12,145,229,.9);color: #fff;}</style></head><body><label for="sel"></label><select name="" id="sel" style="width:50%"></select><ul id="ul"><li> 1</li><li> 1</li><li> 1</li><li> 1</li></ul><script src="/jquery-3.1.1.min.js" type="text/javascript"></script><script>$("#ul").hide();$("#sel").unbind('click').on("click", function (e) {e.stopPropagation();// 解决有时显示重复问题$("#sel").blur();ulStyle();$("#ul").toggle();});// 点击页面其他区域隐藏下拉列表$(document).on("click",function () {$("#ul").hide();});// 浏览器切换tab页隐藏下拉列表document.addEventListener('visibilitychange', function () {if (document.visibilityState === 'hidden') { // 状态判断$("#ul").hide();}});// ul下拉样式function ulStyle() {$("#ul li").css("width", "auto");$("#ul").css("width", "auto");// 如果宽度太小的话让它等于下拉框宽度if ($("#ul").width() < 359) {$("#ul").css("width", $("#sel").width());}}</script></body></html>
还有一个问题，浏览器窗口大小改变的时候，ul的宽度等于初始化时下拉列表的宽度，而下拉列表是相对宽度，随窗口大小改变，所以宽度不相等。
