鼠标感应横向弹出菜单层效果，当用户的鼠标经过时弹出显示，移开后恢复隐藏，良好用户体验鼠标感应弹出菜单特效。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>网站常用鼠标感应弹出菜单特效_武鸣人</title>
<script src="/img/jquery_wuming_ren.js" type="text/javascript" ></script>
<style type="text/css">
<!--
body{color:#333;}
/*--------清除内外边距--------*/
body,h1,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,input,label,figure{margin:0;padding:0;}
section,article,aside,header,footer,nav,dialog,figure{display:block;}
/*--------设置默认字体--------*/
body,td{font:12px/1.5 '宋体',tahoma;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
/*--------重置列表元素--------*/
li{list-style:none; }
.main_sub_nav li span,.main_sub_nav h2,.lastmore .subNav_right{background-image:url(/img/20240302_www_wuming_ren_43.png); background-repeat:no-repeat;}
.top_conbox{height:25px;line-height:25px;text-align:right;}
.header_Banner a{position:relative;z-index:1}
.header_Banner span{text-indent:-10000px;margin-left:160px;display:block;position:absolute;width:230px;height:96px;cursor:pointer;}
.www_wuming_ren{margin-bottom:10px;height:42px;background-repeat:repeat-x;position:relative;z-index:100;}
.nav_list .more_nav0{ width:94px; position:relative; }
.nav_list .more_nav0 a{background-position:-158px -43px;text-align:left; text-indent:10px;}
.nav_list .more_nav0 a.show{background-position:-158px -74px; background-color:#fff; color:#9c0800; border:1px solid #9c0800; border-width:1px 1px 0px; text-align:left;}
.nav_list .more_nav0 .subNav { display:none;position:absolute;width:92px; overflow:hidden;top:33px;left:0px;text-align:left;border:solid #960800;border-width:0 1px 1px 1px;z-index:99;background:#fff;}
.nav_list .more_nav0 .subNav a{display:block; background:#fff;text-decoration:none;font-weight:normal;display:block;font-size:14px; color:#333;height:27px;line-height:27px;border-top:solid #ddd 1px; color:#900800;}
.nav_list .more_nav0 .subNav a:hover{ border-width:1px 0px 0px; color:#ff0000;border-top:solid #ddd 1px; }
.main_sub_nav_border,.moresubnav_border{ width:270px; height:304px;_height:310px; background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5; position:absolute; left:0px; top:0px;}
.main_sub_nav_box{ position:absolute; width:261px;height:294px; _height:300px;padding:0px 5px; z-index:1000;}
.main_sub_nav{ width:260px; padding:5px 0px; height:300px;_height:305px; position:absolute;left:50%; top:75px; margin-left:-470px; z-index:999;}
.main_sub_nav_bg{width:250px;height:294px; _height:300px; background:#fff; padding:0px 5px;}
.main_sub_nav ul{ height:255px;_height:260px;}
.main_sub_nav li{ border-top:1px solid #eee; width:100%; overflow:hidden; padding:0px;}
.main_sub_nav li.first{ border-top-width:0px;}
.main_sub_nav li a{ display:inline; border:none; background:none; color:#8d1e00; font-weight:normal;}
.main_sub_nav li span{ float:left; width:80px; color:#ccc; width:55px; display:inline; background-repeat:no-repeat height:30px; line-height:20px;text-indent:27px;margin:6px 0px; *margin:6px 0px 3px;_margin:6px 0px 4px;}
.main_sub_nav li .subNav_right{ float:right; width:190px; line-height:20px; display:block;margin:6px 0px; *margin:6px 0px 3px;_margin:6px 0px 4px;}
.main_sub_nav li .subNav_right a{line-height:20px; height:20px; font-size:12px; border:none; float:left; display:block; width:80px; text-align:left; text-indent:0px;}
.main_sub_nav li .subNav_right a:hover{ border-width:0px; height:20px; line-height:20px;float:left; display:block; background:#fff; color:#F00}
.main_sub_nav li .subNav_right a.width50{ width:50px;}
.main_sub_nav li .subNav_right a.width60{ width:60px;}
.main_sub_nav .lastmore{ border:1px solid #fff; width:250px; height:32px; background-color:#fff; cursor:pointer; overflow:hidden; position:absolute; bottom:0px; z-index:1000;}
.main_sub_nav .lastborder{border:1px solid #c91107; border-right-width:0px;margin-left:-5px;width:255px; height:32px; padding-left:5px; overflow:hidden;}
.main_sub_nav .lastmore .subNav_right{ background-position:-50px -43px; float:left; color:#8D1E00; text-indent:4px; }
.moresubnav{ display:none; position:absolute; width:312px; height:177px; left:265px; bottom:-5px;top:auto; padding:5px 5px 5px 0px; overflow:hidden;}
.moresubnav ol{ height:165px;_height:165px;overflow:hidden; position:absolute; width:298px;background:#fff; padding:5px; border:1px solid #c91107;}
.show{}
.show1{}
.moresubnav .moresubnav_border{width:312px; height:187px;left:5px;}
.moresubnav li{ border-top-width:0px;;}
.moresubnav li span{ background:none; width:50px; text-indent:0px; color:#464646; padding-left:10px;}
.moresubnav li .subNav_right{ width:230px;}
.moresubnav li .subNav_right a{ width:82px;}
.icon_remen{ background-position:0px 0px; height:30px;}
.icon_jingc{ background-position:0px -55px;}
.icon_danc{ background-position:0px -102px;}
.icon_zuc{ background-position:0px -149px;}
.icon_fuc{ background-position:0px -198px;}
.icon_tic{ background-position:0px -244px;}
.icon_kuai{ background-position:0px -292px;}
.icon_kuai{ background-position:0px -292px;}
.icon_other{background-position:0px -340px;}
.main_sub_nav h2{ height:35px; background-position:-159px 5px; border-bottom:1px solid #cc1108; overflow:hidden;}
.main_sub_nav h2 a{ float:right; color:#a4a4a4; font-weight:normal; line-height:40px;}
.nav_list .more_nav0 a:hover{font-weight:normal;}
/* 弹出层 */
.mylot_layer{position:absolute;z-index:10;display:none;}
.mylot_layer2{position:absolute;top:24px;*top:20px;left:594px;*left:173px;width:68px;border:solid #DEDEDE;border-width:0 1px 1px 1px;background:#fff;z-index:100;}
.mylot_layer2 a{display:block;height:25px;line-height:25px;text-align:center;}
.mylot_layer2 a:hover{background:#f5f5f5;color:#f00;}
.bgiframe{ width:100%; height:100%; left:0px; top:0px;filter:alpha(opacity=0);-moz-opacity:0;opacity: 0;-khtml-opacity:0; position:absolute; z-index:-1;}
/* 导航提示小图标 */
.menu_position{position:absolute;}
.main_sub_nav li .menu_position span a,.main_sub_nav li .menu_position span a:hover{display:block;width:75px;color:#fff;background:none;text-decoration:none;text-indent:8px;height:18px;line-height:17px;*line-height:19px;}
.menu_position .menu_dot{position:absolute;display:block;width:59px;height:17px;line-height:17px;background:url(/img/20240302_www_wuming_ren_44.png) no-repeat;text-indent:11px;color:#fff;left:44px;*left:-24px;top:-2px;*top:-7px;}
.menu_position .menu_dot2{position:absolute;display:block;width:69px;height:19px;line-height:19px;background:url(/img/20240302_www_wuming_ren_45.png) no-repeat;text-indent:11px;color:#fff;left:57px;*left:-13px;top:6px;*top:1px;}
.menu_position .menu_dot3{position:absolute;display:block;width:75px;height:19px;line-height:19px;background:url(/img/20240302_www_wuming_ren_46.png) no-repeat;text-indent:8px;color:#fff;left:75px;*left:-3px;top:17px;*top:13px;}
.menu_position .menu_dot3 a{background:none;text-indent:8px;color:#fff;}
.menu_position .menu_dot4{position:absolute;display:block;width:75px;height:19px;line-height:19px;background:url(/img/20240302_www_wuming_ren_47.png) no-repeat;text-indent:8px;color:#fff;left:75px;*left:-3px;top:17px;*top:13px;}
.menu_position .menu_dot4 a{background:none;text-indent:8px;color:#fff;}
-->
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
把鼠标放到箭头那里，需要加载js文件，请刷新页面后看效果！
<header>
<nav class="www_wuming_ren">
<div id="main_sub_nav" class="main_sub_nav">
<div class="main_sub_nav_border"></div>
<div class="main_sub_nav_box">
<div class="main_sub_nav_bg">
<h2><a href="https://www.wuming.ren/" target="_blank">如何投注？</a><a href="https://www.wuming.ren/" target="_blank">如何领奖？</a></h2>
<ul>
<li class="clear first">
<span class="icon_remen">热门</span>
<div class="subNav_right">
<div class="menu_position"><span class="menu_dot"><a href="https://www.wuming.ren/" target="_blank">2亿加奖</a></span></div>
<a href="https://www.wuming.ren/">双色球</a><br/>
<a href="https://www.wuming.ren/">大乐透</a>
</div>
</li>
<li class="clear">
<span class="icon_jingc">竞彩</span>
<div class="subNav_right">
<div class="menu_position"><span class="menu_dot2"><a href="https://www.wuming.ren/" target="_blank">中400送50</a></span></div>
<a href="https://www.wuming.ren/">竞彩足球</a><br/>
<a href="https://www.wuming.ren/">竞彩篮球</a>
</div>
</li>
<li class="clear">
<span class="icon_danc">单场</span>
<div class="subNav_right">
<div class="menu_position"><span class="menu_dot" style="left:62px;*left:-108px;"><a href="https://www.wuming.ren/" target="_blank" style="width:60px;text-indent:13px;">奖+5%</a></span></div>
<a href="https://www.wuming.ren/" style="width:130px;">让球胜平负</a>
<a href="https://www.wuming.ren/" style="width:40px;">比分</a>
</div>
</li>
<li class="clear">
<span class="icon_zuc">足彩</span>
<div class="subNav_right">
<a href="https://www.wuming.ren/">胜负彩</a>
<a href="https://www.wuming.ren/">任选九场</a>
</div>
</li>
<li class="clear">
<span class="icon_kuai">快频</span>
<div class="subNav_right">
<div class="menu_position"><span class="menu_dot4"><a href="https://www.wuming.ren/" target="_blank" style="text-indent:15px;">全天加奖</a></span><span class="menu_dot3" style="top:-4px;*top:-8px;"><a href="https://www.wuming.ren/" target="_blank">追加2000万</a></span></div>
<a href="https://www.wuming.ren/">十一运夺金</a><br>
<a href="https://www.wuming.ren/">广东11选5</a>
</div>
</li>
<li class="clear" id="lastsubmenu" style="overflow:auto; width:auto;">
<div id="lastmore" class="lastmore">
<span class="icon_other">其它</span>
<div class="subNav_right">
选择更多彩种
</div>
</div>
<div class="moresubnav" id="moresubnav">
<div class="moresubnav_border"></div>
<ol>
<li class="clear">
<span>快频</span>
<div class="subNav_right">
<a href="https://www.wuming.ren/">重庆时时彩</a>
<a href="https://www.wuming.ren/">江西时时彩</a>
<a href="https://www.wuming.ren/" class="width60">江西11选5</a><br>
<a href="https://www.wuming.ren/">广东快乐10分</a>
</div>
</li>
<li class="clear">
<span>数字彩</span>
<div class="subNav_right">
<a href="https://www.wuming.ren/">福彩3D</a>
<a href="https://www.wuming.ren/">排列三</a>
<a href="https://www.wuming.ren/" class="width60">排列五</a><br/>
<a href="https://www.wuming.ren/">七星彩</a>
<a href="https://www.wuming.ren/">七乐彩</a>
<a href="https://www.wuming.ren/" class="width60">22选5</a>
</div>
</li>
<li class="clear">
<span>单场</span>
<div class="subNav_right">
<a href="https://www.wuming.ren/">总进球数</a>
<a href="https://www.wuming.ren/">上下单双</a>
<a href="https://www.wuming.ren/"class="width60">半全场</a>
</div>
</li>
<li class="clear">
<span>足彩</span>
<div class="subNav_right">
<a href="https://www.wuming.ren/">四场进球</a>
<a href="https://www.wuming.ren/">六场半全</a>
</div>
</li>
</ol>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<script type="text/javascript">
var delayMenu;
$(".subNav").append('<iframe frameborder="0" class="bgiframe" scrolling="no" width="100%" height="100%"></iframe>');
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
$("#lastsubmenu").hover(function(){
delayMenu = setTimeout("wuming_ren()",100);
},function(){
clearTimeout(delayMenu);
$("#moresubnav").animate({width:'hide'},300,function(){
$("#lastmore").removeClass("lastborder");
$("#moresubnav").css({"width":"312px"});
});
});
function wuming_ren(){
clearTimeout(delayMenu);
$("#lastmore").addClass("lastborder");
$("#moresubnav").stop(true,true).animate({width:'show'},300);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>