纯钢性铸铁下拉菜单无需射流研究…

再来个今天某人说过的例子：纯钢性铸铁下拉菜单：效果图

这个的实现很简单，主要是：悬停和过渡属性过渡的使用。

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title CSS/title style * { margin : 0；划水：0;font-size : 16px字体系列： '微软雅黑；} #容器{ width : 100 pxmargin : 0 auto文本对齐：中心；相对位置：} #容器ul {列表式：无；} # container span { display : inline-block；宽度： 100像素；高度： 30px线高： 30px光标：指针；} #集装箱ul { height : 0；宽度： 100像素；飞越：隐藏；过渡：全1;绝对位置：top: 30pxleft: 0px} #容器：悬停ul { height : 330 px} #容器ul li { background: # eee保证金-top : 3px；光标：指针；高度： 30px线高： 30px}/style/head body div id=' container ' span移动/span ul li这里有1/李莉这里有2/李莉这里有3/李莉这里有4/李莉这里有5/li li这里有6/li li这里有7/li li这里有8/li li这里有9/li li这里有10/li /ul /div/body/html因为保险商实验所是个伸缩对象，所以要让它脱离文档流，不是在实用时会影响到布局，给它一个绝对定位即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。