右侧悬浮菜单实例代码

来源：互联网发布：云计算虚拟化技术ppt 编辑：程序博客网时间：2024/05/06 22:08

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><meta content="text/html; charset=gbk" http-equiv="Content-Type"><TITLE> Navigation Bar </TITLE><link type="text/css" rel="stylesheet" href="style/chat007.css" mce_href="style/chat007.css"><link type="text/css" rel="stylesheet" href="style/Muyu007.css" mce_href="style/Muyu007.css"><mce:script type="text/javascript"></mce:script></HEAD><BODY><div>test 11 11 11 11 11</div><div id="divQQbox" class="QQbox" style="width: 150px; top: 297.4px;"> <div style="display: none;" mce_style="display: none;" onmouseout="hideMsgBox(event);" id="divOnline" class="Qlist"> <div class="t"> </div> <div class="con"> <ul> <li><a target="_blank" href="http://chatserver.comm100.cn/ChatWindow.aspx?siteId=80015513&planId=28&visitType=1&byHref=1" mce_href="http://chatserver.comm100.cn/ChatWindow.aspx?siteId=80015513&planId=28&visitType=1&byHref=1"> <img border="0px" alt="Live Chat" src="http://chatserver.comm100.cn/BBS.aspx?siteId=80015513&planId=28" mce_src="http://chatserver.comm100.cn/BBS.aspx?siteId=80015513&planId=28" id="comm100_EmailImage"> </a> </li> <li> <a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45"> 网站首页</a> </li> <li> <a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45"> 服务领域</a></li><li> <a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45"> 关于我们</a></li></ul> </div> <div class="b"> </div> </div> <div onmouseover="OnlineOver();" id="divMenu" style="display: block;" mce_style="display: block;"><img alt="在线咨询" class="press" src="qq_1.gif" mce_src="qq_1.gif"> </div> </div> <mce:script type="text/javascript"></mce:script></BODY></HTML>.QQbox{z-index:999;width: 150px;right: 3px;top: 175px;position: absolute;color: #000;display: block;}.QQbox .Qlist a {font-size: 12px;color: #000;text-decoration: none;line-height: 25px;width: 150px;display: block;height: 25px;}.QQbox .Qlist a:hover {color: #069;text-decoration: underline;display: block;}.QQbox .press{ right: 0; border: none; cursor: pointer;width: 26px; height: 136px;position: absolute;}.QQbox .Qlist{width: 150px;background: url(../images/siderIM_bg.gif) padding:5px;display: block;}.QQbox .Qlist .b{ float: right; height: 6px; width: 150px; font-size: 1px; }.QQbox .Qlist .infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#000;font-weight:700;}.QQlistLi01 {overflow: hidden;height: 25px;width: 150px;display: block;}.QQbox .Qlist .t{height:34px;background-image: url(../images/chatbg1.png);background-repeat: repeat;display: block;}.QQbox .Qlist .b{height:20px;overflow:hidden;background-image: url(../images/chatbg3.png);background-repeat: no-repeat;}.QQbox .Qlist .con{width: 100%;padding: 10px 0px 10px 0px;background-image: url(../images/chatbg2.png);background-repeat: repeat-y;display: block;overflow: hidden;height: 160px;}.QQbox .Qlist .con h2{ height: 22px; font: bold 12px/22px "宋体"; background: url(../images/siderIM_bg.gif) repeat-y -163px 0; border: 1px solid #3a708d; text-align: center; color:#fff;}.QQbox .Qlist .con ul li{display: block;padding-top: 0px;padding-right: 5px;padding-bottom: 0px;padding-left: 15px;height: 25px;line-height: 25px;width: 150px;overflow: hidden;left: 0px;clear: both;float: left;position: relative;}

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,img,div{margin:0;padding:0;border:0;}.index {background-repeat: repeat-x;background-position: center top;color: #FFF;font-family: Arial, Helvetica, sans-serif, "微软雅黑";font-size: 12px;margin-top: -30px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;z-index: 1;background-image: url(../images_muyu/index_bg_body.png);}.pagebody {width: 960px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;}.pageHead {width: 100%;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;overflow: hidden;height: 206px;z-index: 100;position: absolute;background-image: url(../images_muyu/menubg_muyu007.com.png);background-repeat: no-repeat;background-position: center top;text-align: center;}.muyubanner {overflow: hidden;height: 380px;width: 960px;top: 170px;position: absolute;z-index: 10;}.muyubanner2 {overflow: hidden;height: 384px;width: 960px;}.index_aboutus {margin: 20px;height: 140px;width: 920px;top: 5px;position: relative;}.index_aboutusNy {width: 420px;line-height: 35px;font-size: 14px;float: left;top: 20px;position: relative;left: 10px;}.shouzida {font-family: "微软雅黑";font-size: 28px;}.index_word {overflow: hidden;height: 94px;width: 960px;margin-top: 0px;position: relative;}.pagebodyIndex {width: 960px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;overflow: hidden;height: 1912px;background-image: url(../images_muyu/indexbg.jpg);background-repeat: no-repeat;background-position: center 200px;z-index: 5;padding-top: 206px;font-family: "微软雅黑";}.pagebodyIndexfoot {width: 1000px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;overflow: hidden;height: 236px;background-image: url(../images_muyu/index_footbg.png);background-repeat: no-repeat;background-position: center top;}.pagebodyIndexfootNy {width: 960px;overflow: hidden;height: 110px;margin-top: 10px;margin-right: 20px;margin-bottom: 0px;margin-left: 20px;position: relative;font-family: "微软雅黑";}.pagebodyIndexfootNy1 {width: 960px;overflow: hidden;height: 50px;margin-top: 0px;margin-right: 20px;margin-bottom: 0px;margin-left: 20px;position: relative;}.pagebodyIndexfootNy1a {width: 700px;overflow: hidden;height: 50px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;position: relative;float: left;clear: left;}.pagebodyIndexfootNy1b {width: 250px;overflow: hidden;height: 50px;position: relative;float: right;clear: right;margin: 0px;}.pagebodyIndexfootNy2 {width: 960px;overflow: hidden;height: 60px;margin-top: 0px;margin-right: 20px;margin-bottom: 0px;margin-left: 20px;position: relative;text-align: center;color: #999;}.pagebodyIndexfootbg {width: 100%;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;overflow: hidden;height: 236px;background-image: url(../images_muyu/index_footbgline.png);background-repeat: repeat-x;background-position: center top;}.button007 {background-image: url(../images_muyu/buttonbg1.png);background-repeat: no-repeat;background-position: left top;text-align: center;height: 30px;line-height:30px; width: 107px;position: relative;}.button007b {background-image: url(../images_muyu/buttonbg1.png);background-repeat: no-repeat;background-position: left top;text-align: center;height: 30px;line-height:30px;width: 107px;position: relative;}.button007 a {height: 30px;width: 107px;top: 0px;color: #FFF;text-decoration: none;display: block;}.button007b a {height: 30px;width: 107px;top: 0px;color: #FFF;text-decoration: none;display: block;}.button007 a:hover {height: 30px;width: 107px;color: #FFF;text-decoration: none;background-image: url(../images_muyu/buttonbg2.png);background-repeat: no-repeat;background-position: left top;}.button007b a:hover {height: 30px;width: 107px;color: #FFF;text-decoration: none;background-image: url(../images_muyu/buttonHover.gif);background-repeat: no-repeat;background-position: left top;}.button007aabout2 {width: 120px;position: absolute;height: 30px;display: block;float: left;left: 530px;top: 90px;}.button007fuwu {width: 100%;position: relative;height: 70px;}.button007fuwu1 {width: 120px;position: absolute;height: 30px;display: block;float: left;left: 35px;}.button007fuwu2 {width: 120px;position: absolute;height: 30px;display: block;float: left;left: 275px;}.button007yuanying {width: 120px;position: absolute;height: 30px;display: block;float: left;left: 630px;top: 90px;}.button007fuwu3 {width: 120px;position: absolute;height: 30px;display: block;right: 180px;float: right;}.index_kehu {sposition: relative;height: 570px;width: 960px;}.index_news {position: relative;height: 200px;width: 910px;padding-top: 18px;padding-right: 20px;padding-bottom: 20px;padding-left: 30px;}.index_news1 {position: relative;height: 170px;width: 280px;float: left;margin-top: 10px;}.index_news2 {float: right;height: 150px;width: 370px;position: relative;right: 230px;}.index_newsbut {position: absolute;height: 30px;width: 120px;left: 320px;top: 190px;}.index_news2 ul li a {font-size: 14px;color: #3496D3;text-decoration: none;}.index_news2 ul li a:hover {font-size: 14px;color: #FFF;text-decoration: underline;}.index_news2 ul li {height: 32px;width: 100%;list-style-type: none;line-height: 32px;}.index_fuwu {height: 150px;width: 890px;position: relative;margin-top: 220px;overflow: hidden;padding-top: 22px;padding-right: 20px;padding-bottom: 0px;padding-left: 45px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;}.index_fuwu ul li {margin: 0px;padding: 0px;height: 27px;display: block;width: 210px;line-height: 27px;position: relative;}.index_fuwu ul li a {color: #FFF;text-decoration: none;text-indent: 15px;display: block;height: 27px;width: 210px;font-size: 12px;line-height: 27px;}.index_fuwu ul li a:hover {color: #2DACDF;text-decoration: none;background-repeat: no-repeat;background-position: 4px 12px;height: 27px;width: 210px;background-image: url(../images_muyu/dot007.gif);line-height: 27px;}.index_fuwu01 {height: 150px;width: 230px;text-align: left;position: relative;float: left;}.index_fuwu02 {height: 150px;width: 230px;text-align: left;position: relative;float: right;right: 420px;top: 0px;clear: right;}.Muyulink {font-size: 10px;line-height: 16px;text-decoration: none;overflow: hidden;height: 22px;margin-top: 8px;}.muyulink li {float: left;list-style-type: none;position: relative;}.muyulink li a {float: left;font-size: 10px;color: #666;text-decoration: none;}.muyulink li a:hover {float: left;font-size: 10px;color: #CCC;text-decoration: none;}