.container1 { height: 30px; }.container1 div { float: left; }.container1 div, .container1_2 div { width: 100px; background: none repeat scroll 0% 0% rgb(250, 252, 253); border: 1px solid rgb(92, 156, 192); padding: 10px; }div.on1 { font-weight: bold; background: none repeat scroll 0% 0% rgb(238, 243, 247); }div.on1_2 { font-weight: bold; background: none repeat scroll 0% 0% rgb(255, 255, 247); border: 1px solid rgb(255, 204, 0); } 菜单使用演示：


-------------test-------------








位置： 第四个 第三个 第二个 第一个1秒 0.5秒 0.2秒 不延时

仿京东商城商品分类菜单：

.container2, .container2 dd, .container2_2 dl, .container2_2 dd { margin: 0pt; }.container2 { font-size: 14px; width: 190px; border: 1px solid rgb(207, 32, 32); background: none repeat scroll 0% 0% rgb(255, 255, 245); padding: 5px 8px; line-height: 30px; color: rgb(51, 51, 51); }.container2 dt { font-weight: bold; color: rgb(207, 32, 32); }.container2 dd { background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/n4.jpg") no-repeat scroll 180px 10px transparent; }.container2_2 { background-color: rgb(190, 190, 195); display: none; }.container2_2 dl { font-size: 14px; width: 200px; border: 1px solid rgb(150, 150, 150); background: none repeat scroll 0% 0% rgb(255, 255, 255); position: relative; left: -3px; top: -3px; }.container2_2 dd div { padding: 5px 20px; background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/n4.jpg") no-repeat scroll 6px 7px transparent; }.container2_2 dt, .shadow { padding: 0pt 5px; position: absolute; background: none repeat scroll 0% 0% rgb(255, 255, 255); border-width: 1px 0pt 1px 1px; border-style: solid none solid solid; border-color: rgb(150, 150, 150) -moz-use-text-color rgb(150, 150, 150) rgb(150, 150, 150); width: 169px; left: -180px; top: -1px; height: 24px; line-height: 24px; }.shadow { background-color: rgb(190, 190, 195); border-color: rgb(190, 190, 195); top: 0pt; }.container2_2 a { display: block; }.container2_2 a:link, .container2_2 a:visited, .container2_2 a:active { color: rgb(51, 51, 51); text-decoration: none; }.container2_2 a:hover { color: rgb(255, 96, 38); text-decoration: underline; }

图片动画

图片效果

动画效果

系统其他

系统效果

其他效果

仿window xp右键菜单：
.container3 { font-size: 12px; border: 1px solid rgb(157, 157, 161); padding: 3px; line-height: 18px; background: none repeat scroll 0% 0% rgb(255, 255, 255); cursor: default; -moz-user-select: none; }.container3 div { padding: 0pt 20px; }.menu3_1 { color: rgb(172, 168, 153); }.menu3_2 { background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif") no-repeat scroll 133px 0pt transparent; }.menu3_2_on { background-position: 133px -18px; }.menu3_3 { background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif") no-repeat scroll left -36px transparent; }.menu3_3_on { background-position: left -54px; }.menu3_4 { background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif") no-repeat scroll left -72px transparent; }.menu3_4_on { background-position: left -90px; }.line3 { border-bottom: 1px solid rgb(172, 168, 153); margin: 4px 0pt; }.on3 { background-color: rgb(49, 106, 197); color: rgb(255, 255, 255); }.area3 { width: 500px; height: 200px; border: 1px solid rgb(172, 168, 153); }.pos3 { position: absolute; display: none; width: 150px; }