【前言】
学生提问：二级导航滑过时偶尔会出现闪烁问题，看上去不稳定
【主体】
（1）原因分析：这种情况一般都是因为事件绑定错元素导致的
（2）分清楚绑定的元素，用jQuery实现时，注意是绑定li。下面我分享个刚做的demo，参考理解下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉菜单</title>
<!--引用百度服务器的jQuery库-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
/*CSS全局设置*/
*{
margin:0;
padding:0;
}
.nav{
background-color:#EEEEEE;
height:40px;
width:450px;
margin:0 auto;
}
ul{
list-style:none;
}
.nav>ul ul{
position: absolute;
display: none;
top: 50px;
}
ul li{
padding-bottom: 20px;
float: left;
line-height: 40px;
text-align: center;
}
a{
text-decoration: none;
color: #000000;
display: block;
width: 90px;
height: 40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
ul li ul li{
padding-bottom: 0px;
float:none;
background-color:#EEEEEE;
}
ul li ul{
display:none;
}
/*为了兼容IE7写的CSS样式，但是必须写在a:hover前面*/
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
</style>
</head>
<body>
<div id="nav" class="nav">
<ul>
<li><a href="#">网站首页</a></li>
<li class="navmenu"><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li class="navmenu"><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<script>
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
})
</script>
</body>
</html>
.
相关推荐
本文将深入探讨如何使用JavaScript和CSS实现一个横向二级导航菜单，这是网站制作人员必须掌握的一项技能。 首先，我们从HTML结构开始。在`nav.html`文件中，你可能会看到一个包含一级导航项和二级导航项的`<ul>`...
"jQuery扁平化风格的二级导航菜单代码"是用于创建高效、直观且具有现代感的导航菜单的一种实现方式。扁平化设计是近年来非常流行的设计趋势，强调简洁、清晰和无装饰的界面，而jQuery则是一个强大的JavaScript库，...
"js+css精美二级导航菜单"是一个使用JavaScript和CSS技术构建的高效、美观且易用的网页组件。在这个项目中，我们将深入探讨如何利用这两种前端技术来创建一个高效的二级导航菜单。 首先，CSS（层叠样式表）是用于...
而下拉二级菜单列表则是导航条中的常见功能，特别是在大型网站如新浪游戏频道中，这样的设计能够有效地组织和展示大量的子分类。本篇将详细介绍如何使用原生JavaScript实现新浪游戏频道导航条的下拉二级菜单列表。 ...
本教程将探讨如何使用CSS和JavaScript技术创建一个超酷的黑灰色二级横向下拉导航菜单，该菜单具备动画效果，为用户提供更加流畅和交互性强的浏览体验。 首先，我们来看CSS在构建这个菜单中的作用。CSS（层叠样式表...
这个导航条特别之处在于它利用jQuery实现了文字的上下滑动切换效果，当鼠标悬停在一级菜单上时，二级菜单会以滑动的方式显示，用户可以通过上下移动鼠标来切换不同的二级菜单选项。 首先，我们来看一下基础的HTML...
而二级导航则在一级导航的基础上提供了更细化的分类，增强了用户体验。"jquery可控制二级导航方向代码"是一个针对这种需求的解决方案，利用jQuery库来实现交互式的下拉菜单效果。 jQuery是一个轻量级、高性能的...
本资源“jQuery实现的鼠标悬停动画二级下拉菜单效果源码.zip”提供了使用jQuery创建的二级下拉菜单的示例代码，帮助开发者构建具有动态视觉效果的导航栏。 首先，jQuery的`hover()`函数是实现鼠标悬停功能的核心。...
4. **优化**：为了提高用户体验，可能还会包含一些额外的优化，例如延迟显示二级菜单（防止快速移动鼠标时的闪烁）或者添加过渡动画以平滑菜单的展开和收起。 这个特效不仅提升了网站的视觉吸引力，还增强了用户的...
每个嵌套的无序列表（二级导航）都被设置为`position: absolute`，并将其顶部设置为导航条的高度（`top: 50px`），使其移出正常的文档流，且宽度与视口宽度相同（`left: 0; right: 0;`）。 在JavaScript部分，我们...
一级菜单项包含在顶级`<ul>`中，而二级菜单项则嵌套在一级菜单的`<li>`内，通常使用`<ul>`作为子菜单。例如： ```html <li><a href="#">菜单1 <li><a href="#">子菜单1-1</a></li> <li><a href="#">子菜单...
在开发界面应用时，为了提高用户体验，通常需要设置窗体上各个控件之间的Tab键导航顺序。这可以通过选择控件属性对话框中的**数据选项卡**来实现（选项B）。通过这种方式，开发者可以根据实际需求调整用户在多个控件...
最后，JavaScript部分主要是为了增强用户体验，比如防止快速移动鼠标导致的二级菜单闪烁。我们可以添加一个短暂的延迟来显示/隐藏二级菜单： ```javascript let timeoutId; document.querySelectorAll('.dropdown-...
DDR、DDR2内存条在物理结构上有区别，如引脚数量不同，通常台式机和笔记本的内存条不兼容。 6. PC机中的串行总线速度不一定低于并行总线，SATA接口不仅用于连接光驱，也可连接硬盘；通过USB集线器，一个USB接口可...
二级菜单在导航栏设计中起到组织和导航的作用。jQuery可以帮助我们实现动态的二级菜单，比如在鼠标悬停一级菜单项时显示对应的二级菜单。这可以通过添加和移除CSS类来控制可见性，或者使用`show()`和`hide()`方法来...
在网页设计中，下拉菜单是一种常见的交互元素，尤其在导航栏中，它们能够有效地组织大量链接，提高用户体验。jQuery 是一个广泛使用的 JavaScript 库，它简化了 JavaScript 的DOM操作，动画效果和事件处理，因此在...
2.[修复]前台页头导航栏二级栏目模式为单篇页时，链接无效BUG 2012年02月10日 ★更新方式：admin文件夹改成你后台目录名，然后补丁包里的所有文件覆盖进去。 1.[新增]后台新增文章时作者栏 加入{%称呼%}自动...
5. **下拉菜单**：在导航栏中，下拉菜单能让用户更快地访问二级或三级菜单。JavaScript可以监听用户的鼠标事件，动态地展开和收起菜单。 6. **计时器和定时器**：通过setInterval和setTimeout函数，JavaScript可以...
- 在左侧导航栏中依次展开“任务计划程序库”、“Microsoft”、“Windows”。 - 找到“MobilePC”项，双击其中的“TMM”任务。 - 在触发器标签页中，找到“登录时”的触发器，并取消启用状态。 2. **进一步调整...