仿qq 实现开关菜单的函数

@charset "utf-8";
/*css定义 */

body {
       background:#5c90d9;/*整个网页的背景颜色*/
}
/*.tit为每个菜单的标题样式  .list 为菜单项目的样式*/
.tit , .list{ /*菜单的宽度*/
}

.tit {/*菜单标题的样式*/
       
       border: 1px solid #2a4dab;/*边框颜色*/
       border-bottom-style: none;/*底部边框没有*/
       background:#547DBE url(images/menu_head_bg.gif) repeat-x;/*背景样式依次为：颜色，图片路径，横向重复*/
       color: #D9E1F6;/*前景色*/
       font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;/*文字样式依次为：粗体 大小/行高 字族*/
       text-indent: 35px;/*文字缩进*/
       margin-top:15px;/*外填充*/
       position: relative;       
}


.tit a ,.tit a:link , .tit a hover{/*菜单标题中的链接的样式，共同的部分*/
       color: #D9E1F6;
       display:block;
       text-decoration:none;
       
       background-repeat: no-repeat;
       background-position: 166px 6px;       
}
.tit a:hover{
       color: #fff;/*鼠标经过时的颜色*/
}
/*====================
       菜单标题中的箭头图片
======================*/
.on{
       background-image: url(images/arrow_up.gif);/*向上的箭头-暗色*/
}
.on:hover{
       background-image: url(images/arrow_up_o.gif);/*向上的箭头-亮色*/
}
.off{
       background-image: url(images/arrow_down.gif);/*向下的箭头-暗色*/
}
.off:hover{
       background-image: url(images/arrow_down_o.gif);/*向下的箭头-亮色*/
}
/*====================
       菜单列表的样式
======================*/
.list{
       font-size: 12px;
       color: #002280;
       background: #fff no-repeat right bottom;
       /*宽度*/
       border: 1px solid #2A4DAB;
       text-align:left;
       padding:10px 10px;
       voice-family:""}"";
       voice-family:inherit;
       
       overflow:hidden;
}
html>body .list {

}
.list ul{
list-style-type:none;
margin:0;
padding:0;
padding-left:18px;
}
.list li{
margin:0;
padding:0;
padding-left:5px;
}
/*============
菜单链接的样式
==============*/
.list a{
color:#002280;
text-decoration:none;
}
.list a:link{
color:#002280;
}
.list a:hover{
color:#296DC1;
text-decoration:underline;
}
.list a:active{
color:#296DC1;
}
/*标题图标样式*/
.titpic {
       position: absolute;
       
       
       left: 0px;
       bottom: 0px;
}
/*每一个标题图标*/
#pc1{
       background: url(images/pepo.png) no-repeat;
}
#pc2{
       background: url(images/st.png) no-repeat;
}
#pc3{
       background: url(images/ring.png) no-repeat;
}
#pc4{
       background: url(images/pic.png) no-repeat;
}
#pc5{
       background: url(images/mv.png) no-repeat;
}
#pc6{
       background: url(images/up.png) no-repeat;
}
#pc7{
       background: url(images/help.png) no-repeat;
}
#menu1_child{
       background-image:url(images/bgmv.png);
}
/*#menu2_child{
       background-image:url(images/bgring.png);
}
*/#menu3_child{
       background-image:url(images/bgring.png);

}
#menu4_child{
       background-image:url(images/bgpic.png);

}
#menu5_child{
       background-image:url(images/bgmv.png);
}

说一下拆分过程：
先将xp截一个屏幕
然后ps里打开量了一下尺寸
把菜分成两部分：
第一部分：标题部分：

最外面的div用来显示 外边框
里面的第一个div用来显示 那个小图片注意它的定位是绝对定位。而它的上一级div是相对定位，这样才能出来这个效果
a就不必说了

第二部分：菜单部分

外面的div用来显示边框、底色、以及右下角的图标。
其他的不必说了，细细的看css文件就可以了。