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。
手机浏览器一般都不支持float
浮动，所以可以用
display:
inline-block
来代替它，当然你也可以用table来布局。用两个
display:inline-block
的块元素，并设定它们的宽度：width:49%
就可以实现一栏两列的布局了。
呵呵，id="3"的span不是不见了，而是你给它父级用了overflow：hidden，把它截掉了，你其实这样写就可以：<div id="a" style="width:100%"> <div id="b" style="width:980pxmargin:0 auto"> <span style="float:left" id="1">x</span><span id="2" style="float:left">y</span><span id="3" style="float:right">z</span> </div></div>左右都浮动就行了 ，
