弹出菜单

别的不说，先上效果图

代码太多了就不都上了，参考http://www.coolicool.com/的菜单

大致上下js跟css

 

js:

 $().ready(function(){
    function getwidth(){return document.documentElement.clientWidth || document.body.clientWidth;}
    
    //菜单弹出
    
    $(".nav_cart li").hover(function(){
        $(this).addClass("current").siblings().removeClass("current");
        $(this).find(".subitem").show();
    },function(){
        $(this).removeClass("current");
        $(this).find(".subitem").hide();
    });
    
});

主要的css

@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333;}
ul,li,dl,dt,dd{list-style:none;}
img{border:none;}
a{color:#004b91; text-decoration:none;}
a:hover{color:#e47911; text-decoration:underline;error}
input,select{border:none;}
ul,dl{margin-left:0;}
.plist dd{margin-left:0;}

/*google bug*/
html{-webkit-text-size-adjust: none;  }
/*start public_style*/
.wauto{min-width:980px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<980?"980px":"auto");}
.fl{float:left; display:inline;}
.fr{float:right; display:inline;}
.clear{clear:both;}
.none{display:none;}

/*header */
.header {position:relative; z-index:10; min-width:1004px;}
.header .logo{margin:15px 10px 5px 10px;}
.header .head_bar{margin:10px 0px 5px 0px;}
.header .head_bar .banr{margin:0;}

/*left menu*/
.nav_cart{position:absolute; z-index:1; left:20px; bottom:10px; background:url(../img/extag_repeat.png) 0px -292px; padding:0px 0px 0px 10px;}
.cartnote{background:url(../img/extag_repeat.png) right -292px; padding:6px 10px 5px 0px; font-size:14px; color:#fff;}
.cartnote p{margin:0; line-height:15px;}
.categorise{position:absolute; left:-25px; top:40px; width:280px; max-width:none; }
.nav_left_top{background:url(../img/extag_repeat.png) no-repeat -5px -575px; width:35px; line-height:10px; height:10px;}
.nav_cent_top{background:url(../img/extag_repeat.png) repeat-x 0px -595px; height:10px ; line-height:10px;}
.nav_right_top{background:url(../img/extag_repeat.png) no-repeat -209px -575px; width:35px; height:10px; line-height:10px;}
.nav_cent_left{background:url(../img/nav-pop-v-v2.png) repeat-y -275px 0px; width:35px; }
.nav_cent_right{background:url(../img/nav-pop-v-v2.png) repeat-y -329px 0px; width:35px; }
.nav_left_bottom{background:url(../img/nav-pop-v-v2.png) no-repeat -185px 0px; width:35px; height:20px; line-height:20px; }
.nav_cent_bottom{background:url(../img/extag_repeat.png) repeat-x 0px -615px; height:45px;  }
.nav_right_bottom{background:url(../img/nav-pop-v-v2.png) no-repeat -239px 0px; width:35px; height:20px; }
.navlist{background:#fff; margin:0;}
.navlist li{ padding:4px 0px; display:block;}

.navlist li .tags_name{color:#333; font-size:13px; margin:0; display:block;}

.navlist li .tags_name a{color:#333; text-decoration:none;}
.navlist li .tags_name a:hover,.navlist li .tags_name:hover{color:#e47911;}
.navlist li .nav_tags{color:#999; font-size:11px;}
.navlist li.border{border-bottom:1px solid #ddd; padding-bottom:6px;}
.navlist .current{background:url(../img/efoxtages.png) no-repeat 196px -136px;}
.navlist .current .tags_name a{font-weight:bold; color:#e47911;}
.nav_all{background:#fff;}
.nav_all .tags_name{background:url(../img/efoxtages.png) no-repeat -496px -483px; padding:4px 0 4px 10px; display:block; color:#333; font-size:13px;}
.subitem{position:absolute; z-index:2; left:245px; top:0px; width:520px; max-width:none;}
.pop_left_top{background:url(../img/extag_repeat.png) no-repeat -85px -575px; width:10px; height:10px;}
.pop_cent_top{background:url(../img/extag_repeat.png) repeat-x 0px -595px; height:3px ; line-height:3px; overflow:hidden;}
.pop_right_top{background:url(../img/extag_repeat.png) no-repeat -210px -586px; width:35px; height:3px; line-height:3px; overflow:hidden;}
.pop_right_cent{background:url(../img/nav-pop-v-v2.png) repeat-y -330px 0px; width:35px; }
.pop_cent-bottom{background:url(../img/extag_repeat.png) repeat-x 0px -630px; height:45px; }
.pop_right_bottom{background:url(../img/nav-pop-v-v2.png) no-repeat -237px -14px; width:35px; height:45px; }
.subitem_list{width:500px; /*height:358px;*/ min-height:358px;background:#fff; border-left:5px solid #ccc; position:relative;}
.subitem_list dl{padding:10px 10px 0px 15px; margin-bottom:5px;}
.subitem_list dt{font-weight:bold; color:#e47911;}
.subitem_list dt  a{color:#e47911;}
.subitem_list dd{padding-left:10px; margin-top:3px;}
.subitem_list dd a{color:#333;}
.subitem_list dd a:hover{color:#e47911;}
.sublist_left,.sublist_cent,.sublist_right{width:250px; float:left; display:inline; position:relative; z-index:1;}
.subitem .add_max_width{width:750px;}