页面的head部分，先引入jQuery库，然后设置好页面元素的样式，代码如下：

*{margin:0;padding:0;}
a,img{border:0;}
#menu{position:fixed;bottom:0px;width:100%;height:44px;line-height:44px;z-index:999;background:url(images/menubg.png) repeat-x;}
#menu ul{margin:0 auto;list-style-type:none;width:100%;max-width:500px;height:100%;}
#menu ul li{float:left;width:33.3%;height:100%;text-align:center;position:relative;font-size:14px;}
#menu ul li .line{position:absolute;top:0px;right:0px;z-index:30;}
#menu ul li .menu_li{position:absolute;top:0px;left:0px;z-index:20;width:100%;height:100%;color:#454545;background:url(images/menubg.png) repeat-x;}
#menu ul li .img_front{position:absolute;top:0px;left:0px;z-index:30;width:100%;height:100%;}
#menu ul li .img_front img{width:100%;height:100%;}
#menu ul li span{position:absolute;bottom:-300px;left:50%;width:104px;margin-left:-52px;margin-bottom:14px;height:auto;text-align:center;z-index:10;}
#menu ul li span div{position:absolute;top:0px;left:0px;}
#menu ul li span a{float:left;width:100%;height:43px;line-height:43px;color:#454545;text-decoration:none;}
.footer_front{position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:888;display:none;}

页面的body部分，结构比较简单，3列菜单分别放在3个不同的li里面，代码如下：

<div id="menu">
	<ul>
		<li>
			<div class="menu_li">