jquery二级下拉多级菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery二级下拉多级菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> @charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#EEEEEE;} a{outline:none;} a:link{color:#434343;text-decoration:none;} a:visited{color:#838383;text-decoration:none;} a:hover{color:#CC0000;text-decoration:none;} /* ------------------------------ * wrap-nav * ------------------------------ */ #wrap-nav, #wrap-nav li, #wrap-nav h3, #wrap-nav h3 a{background:url("//repo.bfw.wiki/bfwrepo/image/605ac931377aa.png") no-repeat scroll left -9999px;} #wrap-nav{height:40px;line-height:40px;background-repeat:repeat-x;background-position:0 0;background-color:#CC0000;width:960px;margin:40px auto 0 auto;} #wrap-nav ul.menu li{position:relative;float:left;padding:0 5px;background-position:0 -40px;} #wrap-nav ul.menu li h3{padding:0 15px 0 0;font-size:1.2em;} #wrap-nav ul.menu li h3 a.depth_1{padding:0 0 0 15px;display:inline-block;color:#FFFFFF;} #wrap-nav ul.menu li h3.hover, #wrap-nav ul.menu li h3.selected{background-position:right -80px;} #wrap-nav ul.menu li h3.hover a.depth_1, #wrap-nav ul.menu li h3.selected a.depth_1{background-position:left -80px;color:#CC0000;} #wrap-nav ul.menu li.hover h3{background-position:right -120px;} #wrap-nav ul.menu li.hover h3 a.depth_1{background-position:left -120px;color:#CC0000;} #wrap-nav ul.menu li ul.children{position:absolute;left:2px;top:40px;z-index:19;display:none;width:393px;padding:6px 7px 5px 6px;border:3px solid #990000;border-top:0px;background:#FFFFFF;} #wrap-nav ul.menu li ul.children li{width:393px;padding:0 0 1px 0;background:none;} #wrap-nav ul.menu li ul.children li.nosub{width:130px;overflow:hidden;} #wrap-nav ul.menu li ul.children li h3{} #wrap-nav ul.menu li ul.children li h3 a.depth_2{width:120px;line-height:25px;display:block;font-weight:normal;font-size:9pt;color:#900;} #wrap-nav ul.menu li ul.children li h3 a.depth_2 span.icon10{margin:10px 3px 0 5px;background-position:-60px -380px;} #wrap-nav ul.menu li ul.children li h3.selected{background:#FFEFEF;} #wrap-nav ul.menu li ul.children li.hover{z-index:20;} #wrap-nav ul.menu li ul.children li.hover h3 a.depth_2{background:#FFCFCF;font-weight:bold;} #wrap-nav ul.menu li ul.children li.hover ul{background:#FFEFEF;border-color:#FFBFBF;height:auto;z-index:20;} #wrap-nav ul.menu li ul.children li.hover ul li a.depth_3{color:#333;} #wrap-nav ul.menu li ul.children li.hover ul li a.depth_3:hover{color:#900;} #wrap-nav ul.menu li ul.children ul{position:absolute;top:0;left:120px;padding:0 0 0 10px;width:263px;height:25px;overflow:hidden;background:#F4F8F9;border-left:2px solid #D8E2EC;} #wrap-nav ul.menu li ul.children ul li{width:auto;paddi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0