导航栏触碰之后闪烁两下就没了

geng471 2015-03-21 10:46:22 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="index.css" />

<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript" src="slide.js"></script>

</head>

<body style="content:inherit;">

<div id="header">



 

<ul id="nav">

    <li class="mainlevel"><span class="note">主页</span></li> 

    <li class="mainlevel" id="mainlevel_01"><a href="#">企业文化</a>

    <ul class="sub_nav_01">

    <li><a href="#">企业文化</a></li>

    <li><a href="#">主页</a></li>

    <li><a href="#">主页</a></li>

    <li><a href="#">主页</a></li>

    <li><a href="#">主页</a></li>

    </ul>

    </li>

    <li class="mainlevel" id="mainlevel_02"><a href="#">专家内容</a>

    <ul class="sub_nav_01">

    <li><a href="#">主页</a></li>

    <li><a href="#">专家内容</a></li>

    <li><a href="#">专家内</a></li>

    <li><a href="#">主页</a></li>

    <li><a href="#">主页</a></li>

    </ul>

    </li> 

    <li class="mainlevel"><a href="#">联系我们</a>

    <ul class="sub_nav_01">

    <li><a href="#">联系我们</a></li>

    <li><a href="#">联系</a></li>

    <li><a href="#">联系-FO</a></li>

    <li><a href="#">联系</a></li>

    <li><a href="#">联系</a></li>

    </ul>

    </li>

    <li class="mainlevel"><a href="#">企业介绍</a><!--input an em tag as a space,IE is gread need-->

    <ul class="sub_nav_01">

     

    <li><a href="#">联系</a></li>

    <li><a href="#">企业介</a></li>

    <li><a href="#">企业介绍</a></li>

    <li><a href="#">企业介绍</a></li>

    <li><a href="#">企业介绍</a></li>

    </ul>

    </li>

    <li class="mainlevel"><a href="#">产品介绍</a>

    <ul class="sub_nav_01">

    <li><a href="#">产品介绍</a></li>

    <li><a href="#">产品介绍</a></li>

    <li><a href="#">产品介绍</a></li>

    <li><a href="#">产品介绍</a></li>

    </ul>

    </li>

</ul>

</div>

</div>



<div id="head">

</div>



<div id="main">



<div id="float"></div>

<div id="cent"></div>

<div id="reg"></div>



</div>



<div id="footer">

</div>

</body>

</html>







/* CSS Document */

body{ width:1100px; font-size:14px;}



#header{ width:1100px; height:80px;  border:solid 1px #FF0000; background-color:#d3dfe0; }

#main{ width:1100px; height:275px;border:solid 1px #FF0000;} 

#head{  width:1100px;height:350px;border:solid 1px #FF0000;}

#float{ width:265px; height:175px;border:solid 1px #FF0000; margin:45px; float:right; }

#cent{ width:415px; height:180px;border:solid 1px #FF0000;margin:45px; float:right;}

#reg{ width:135px; height:175px;border:solid 1px #FF0000;margin:45px; float:right;}



#footer{ width:1100px; height:150px;border:solid 1px #FF0000;}



 

#nav .mainlevel {float:left; text-align:center; display:block;font-size:16px;}

#nav .mainlevel a { color:#707071; text-decoration:none; line-height:30px; height:34px; text-align:center; padding:0 20px; display:block; _width:48px;font-weight: bold;}

#nav .mainlevel a:hover {text-decoration:none;color:#131313; background:url(Bt008_007_01_0006s_0000_ON.png) 15px 30px repeat-x;}

#nav .mainlevel ul {position:absolute; display:none; *width:2000px;/*IE is great need, width>=li.length*/margin: 6px -130px;border:solid 1px #FF0000; height:25px; }

#nav .mainlevel li {float:left;height:50px; background:url(Bt008_007_01_0000s_0004_DOT-LINE.png) no-repeat 1px 10px;}

#nav .mainlevel li a {padding:0 12px; line-height:30px; height:24px; display:block; _padding-bottom:6px;/*IE6 only*/font-size:14px;} 

#nav .mainlevel li a:hover { text-decoration:none;}

.note { color:#707071;display:block; line-height:34px; padding:0 3em;}

#nav { margin-right: 200px;margin-top: 40px;display:block;}

ul,li {list-style-type:none; float:right; }










//menu

$(document).ready(function(){

  

  $('li.mainlevel').mousemove(function(){

  $(this).find('ul').slideDown();//you can give it a speed

  });

  $('li.mainlevel').mouseleave(function(){

  $(this).find('ul').slideUp("fast"); 

  });

  

});

我写的好好的，测试了一下然后就闪烁了两下不停留了,
我没加样式之前好好的，加了点图片什么的就变成触碰闪烁两下，
麻烦大神看看哪里错了,为毛好好的突然二级导航触碰不停留了.
我用的是jQuery1.4.2 jQuery 官网下的
...全文
159 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
滴滴月空雨 2015-03-23
  • 打赏
  • 举报
 回复
看一下，这样是可以的！
滴滴月空雨 2015-03-23
  • 打赏
  • 举报
 回复 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>无标题文档</title>
<style>
/* CSS Document */
body{ width:1100px; font-size:14px;}

#header{ width:1100px; height:80px;  border:solid 1px #FF0000; background-color:#d3dfe0; }
#main{ width:1100px; height:275px;border:solid 1px #FF0000;} 
#head{  width:1100px;height:350px;border:solid 1px #FF0000;}
#float{ width:265px; height:175px;border:solid 1px #FF0000; margin:45px; float:right; }
#cent{ width:415px; height:180px;border:solid 1px #FF0000;margin:45px; float:right;}
#reg{ width:135px; height:175px;border:solid 1px #FF0000;margin:45px; float:right;}

#footer{ width:1100px; height:150px;border:solid 1px #FF0000;}

 
.mainlevel_01{float:left; text-align:center; display:block;font-size:16px;position:relative;}
.mainlevel_01 a { color:#707071; text-decoration:none; line-height:40px; height:40px; text-align:center; padding:0 20px; display:block; _width:48px;font-weight: bold; float:left; }
.mainlevel_01 a:hover {text-decoration:none;color:#131313; background:url(Bt008_007_01_0006s_0000_ON.png) 15px 30px repeat-x;}
.sub_nav_01{position:absolute; top:40px; left:0; display:none; *width:2000px;/*IE is great need, width>=li.length*/margin: 0px -130px;border:solid 1px #FF0000; height:25px; }
.sub_nav_01 li {float:left;height:50px; background:url(Bt008_007_01_0000s_0004_DOT-LINE.png) no-repeat 1px 10px;}
.sub_nav_01 li a {padding:0 12px; line-height:30px; height:24px; display:block; _padding-bottom:6px;/*IE6 only*/font-size:14px;} 
.sub_nav_01 li a:hover { text-decoration:none;}
.note { color:#707071;display:block; line-height:34px; padding:0 3em;}
#nav { margin-right: 200px;margin-top: 40px;display:block; width:100%}
ul,li {list-style-type:none; float:left; }

</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   
 $(".mainlevel_01").hover(function (){
        $(this).find(".sub_nav_01").slideDown();
    },function() {  
		$(this).find(".sub_nav_01").slideUp();
	})
});
</script>
</head>
<body style="content:inherit;">
<div id="header">

 
<ul id="nav">
    <li class="mainlevel"><span class="note">主页</span></li> 
        <li  class="mainlevel_01"><a href="#" class="h">企业文化</a>
        <div class="sub_nav_01">
            <ul>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            </ul>
        </div>
        </li>
     <li  class="mainlevel_01"><a href="#" class="h">企业文化</a>
        <div class="sub_nav_01">
            <ul>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            </ul>
        </div>
        </li>
         <li  class="mainlevel_01"><a href="#" class="h">企业文化</a>
        <div class="sub_nav_01">
            <ul>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            </ul>
        </div>
        </li>
         <li  class="mainlevel_01"><a href="#" class="h">企业文化</a>
        <div class="sub_nav_01">
            <ul>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            </ul>
        </div>
        </li>
         <li  class="mainlevel_01"><a href="#" class="h">企业文化</a>
        <div class="sub_nav_01">
            <ul>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#">主页</a></li>
            </ul>
        </div>
        </li>
</ul>
</div>
</div>

<div id="head">
</div>

<div id="main">

<div id="float"></div>
<div id="cent"></div>
<div id="reg"></div>

</div>

<div id="footer">
</div>
</body>
</html>
geng471 2015-03-22
  • 打赏
  • 举报
 回复
谁帮我看看，我觉得是css样式里面有问题
geng471 2015-03-22
  • 打赏
  • 举报
 回复
快来人帮忙看看
前端热门框架Vue3.x自定义组件实现头部导航栏教程
Vue 3 更新了许多组件中的语法，包括生命周期、filter、setup、teleport 等，为了学习这些... 目前关于Vue3.x的资料较少，为了帮助大家掌握Vue3.x技术，老师通过小案例的方式带领大家熟悉Vue.3x实现头部导航栏应用。
微软 Win11 Build 22000.100 更新发布：全新任务栏应用提醒，大量细节优化
今日，微软宣布向预览体验计划用户发布Windows 11Build 22000.100 更新。 变化和改进 微软已开始在 Dev 通道中将聊天应用从 Microsoft Teams 推广到 Insider 通道。但不是每个人都可以马上看到。 任务栏右下方的隐藏图标弹出窗口已更新，以匹配 Windows 11 的全新新视觉效果。（注意：更新到此版本后可能看起来不正确，在两个主题间切换将纠正该问题。 微软添加了直接从通知中心快速访问勿扰设置的功能。 当应用的后台活动需要注意...
鬼故事~ 媚娘[完结版]
1~买镯我只是一个平凡的大三女子，生活简单如斯，宿舍食堂教室三点一线的穿梭。习惯了抱着自己的书本和与生俱来的寂寞独自行走于这座城市。世界视我如荒漠，我视它，亦然。是的。没有爱情，或者书本读的太多，想象中的爱太好，反而不敢要。何况？谁又会注意到我呢？一个天资与容貌都平常的女子。唯一的小特别，是我的收集。也许因为爱了读古文，莫名的便喜欢那些古老的钱币，铜镜，花瓶。。。小小的零碎一些并不值钱的东西，浓浓
Siki_Unity_2-7_Stealth秘密行动
Unity 2-7 Stealth秘密行动 Abstract：向量运算；Animation动画；Navigation寻路系统；Mecanim动画系统 任务1&2&3：游戏介绍 &&创建工程和游戏场景介绍 &&创建游戏环境 逃生游戏，过关条件为拿到钥匙并从电梯处逃脱被敌人/摄像头/触碰红外线 --触发警报红外线可以手动断电 右上图场景是美工...
CSS HACK收集：在IE6下hack的方法详解
原文：http://www.html5cn.org/article-5027-1.html +  针对IE7 * 针对ie6和ie7 _ 针对ie6 最好采用条件注释的方法 本篇文章小编为大家介绍CSS HACK的收集：在IE6浏览器下hack的方法详解。需要的朋友参考下。 　　在IE6 下 　　a标签嵌套img标签IE下会有边框，那是超链接默认的样式，解决办法：img{border...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章