方法一：
.a, .b {display: inline-block
width: 50%
border: 0
vertical-align:top /*靠上对齐*/
}
方法二：
.a, .b {float: left
width: 50%
border: 0
}
.parent:after { /*清除浮动*/
content: ''
display: block
clear: both
}
方法一看起来简单，但一般不建议使用行内块级元素（inline-block），容易出现一些让人摸不着头脑的错位问题。个人建议使用方法二。
一般来说弹出和拉出的菜单都是用JS实现的，因为这属于行为的范畴，CSS只负责外观显示。如果非要用CSS实现的话也可以，做一个链接的伪类a:hover
然后修改菜单长宽和位置。
最好把你要向上500的元素改为绝对定位：写一个Css样式
.top{
position:absolute
margin-top:-500px//一定要是负数哟！！！
}
