这样就可以了,如果你的select外面有form的话,还要定义form的margin、和padding为0,这个标记默认情况下也是有margin和paading的。
LZ我看你用li:hover,你的意思该不会是要这么写二级目录吧:CSS样式:
<style type="text/css">
ul.menu{
display:block
overflow:visible
text-align:center
line-height:25px}
li.fb{
float:left
list-style-type:none
overflow:hidden
border:1px solid #ccc
height:25px
width:200px}
a.fb-a{
display:block}
li.fb:hover{
overflow:visible}
</style>
body内容:
<body>
<ul class="menu">
<li class="fb"><a class="fb-a" href="###">导航一</a>
<ul class="next">
<li class="sb"><a href="####">二级菜单</a></li>
<li class="sb"><a href="####">二级菜单</a></li></ul></li>
</ul>
</body>
原理很简单,就是在li.fb固定高度和宽度,然后设置overflow:hidden就是超出部分不显示。
那么ul.next属于超出li标签外的部分,就被隐藏了。
当li标签触发hover动作时,overflow:visible超出部分变为可视。
但问题出来了。最重要的是li:hover在IE6下不支持。IE6只支持带有href的a标签的hover属性。所以不管你怎么用css来写,IE6都不会给你面子的。
LZ还是死了这条心吧......
以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题,以类选择器为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实现隐藏和显示时,会出现动画效果播放完之前,下拉菜单栏内容已经展示出来。