ul { list-style:none margin:0 padding:0 text-align:center background:#F03 color:#FFF -webkit-transform:scaleY(0) -webkit-transform-origin:0 0 }
li { padding:0 margin:0 }
div { width:200px }
div:hover ul { -webkit-animation:ulShow 0.4s -webkit-animation-fill-mode:forwards -webkit-animation-timing-function: cubic-bezier(0,0.8,0.9,1) }
div div { height:30px line-height:30px text-align:center background-color:#FC0 }
@-webkit-keyframes ulShow {
from { -webkit-transform:scaleY(0) }
to { -webkit-transform:scaleY(1) }
} <!-- HTML部分 -->
<div>
<div>下拉 </div>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</div>
本例适用于谷歌浏览器和Safari浏览器，如需兼容Opera须将“-webkit-”更改为”-o-“，火狐改为“-moz-
”，IE系列比较复杂在此不予举例详情请查询W3C。
纯CSS的下拉菜单，此处理解的意思就是标签套
标签，然后再给
标签设置样式。在被套的
标签设置平时状态为隐藏，再等鼠标移动到上一个
标签时，将被套的
标签显示（样式：overflow:hidden
）。
贴一段网上摘的纯CSS下拉菜单（二级）
利用float制作兼容ie6纯css下来菜单
*
{
margin:0
padding:0
}
ul
{
list-style:none
}
a:hover
{color:#555
}
.nav
{
float:left
overflow:hidden
text-align:center
font-size:14px
}
.nav
dd
{
float:left
width:300px
margin:-888px
-150px
0
0
}
.nav
dd
a
{
float:left
margin-top:888px
display:block
position:relative
background:#eee
width:150px
height:30px
line-height:30px
border-bottom:1px
solid
#fff
}
.nav
a:hover
{
margin-right:1px
background:#3cf
}
.nav
dd
ul
{
float:left
font-size:0
z-index:888
}
.nav
dd
li
a
{
clear:left
width:150px
margin-top:0
font-size:14px
}
.nav
dd
li
a:hover
{
margin-right:1px
}
首页
关于我们
公司简介
公司文化
企业荣誉
联系我们
新闻动态
国内新闻
国外新闻
产品展示
111
222
