以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。
第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。
未显示时属性为（ display: none）显示时属性为（display: block），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通...
除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden 来实现。
list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。
同样是通过overflow: hidden实现隐藏，但是是通过visibility:visible显示隐藏，动画效果仍然有效。
就是相比方法二将hover里面的属性由display: block改为visibility:visible
以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。
比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden和visibility:visible实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。
<form id="form1" name="form1" method="post" action=""><label for="select"> </label>
<select name="select" size="1" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
html中动态生成下拉框时的宽度设置的方法。
如下参考：
1.直接设置选择标签的宽度为100。具体操作步骤首先需要创建一个新的HTML文件，在文件中创建2个select下拉列表。
2.然后在顶部的标题标签中设置样式样式表。首先，设置第一个select标记的宽度。
3.然后设置select2的宽度。这里百分比用于设置宽度，如下图。
4.最后，当您打开浏览器时，您将看到两个不同宽度的select下拉列表。这就是HTML页面下拉列表控制宽度的设置方式，如下图。
