<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>li导航</title>
<style type="text/css">
*{padding: 0;margin: 0;}
#box{width: 100%;background: red;height: 50px;margin: 0 auto;position: relative;min-width: 500px;}
#list{margin: 0 400px;min-width: 500px;}
#list li{list-style: none;float: left;padding: 10px;background: paleturquoise;cursor: pointer;
}
#hide{width: 86px;height: 150px;background: blueviolet;position: absolute;top: 39px;
left: 451px;display: none;}
#hide ul li{list-style: none;text-align: center;width: 67px;height: 38px; line-height: 38px;}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>

</head>
<body>
<div id="box">
<ul id="list">
<li>首页</li>
<li id="pro">产品列表

</li>
<li>活动介绍</li>
<li>联系我们</li>

</ul>
<div id="hide">
<ul >
<li>首页</li>
<li>表头</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
</div>

<script type="text/javascript">
$(function(){
var pro = document.getElementById("pro");
var hide = document.getElementById("hide");

pro.onmouseover = function(ev){
var ev = ev || event;
hide.style.display = 'block';
ev.cancelBubble = 'true';

}
hide.onmouseover = function (ev){
var ev = ev || event;
ev.cancelBubble = 'true';
}

document.onmouseover = function (){
hide.style.display = 'none';
}

})
</script>
</body>
</html>

navLI鼠标滑上显示下拉导航的更多相关文章

  1. 实用的 鼠标滑上显示提示信息的jq插件

    使用非常简单, 引用 css js文件, 将需要显示提示信息的元素 添加class="tooltip"类名, 在title属性填写提示信息就好了title="啊啊啊啊&q ...

  2. css样式控制鼠标滑过显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Android实现下拉导航选择菜单效果

    本文介绍在Android中如何实现下拉导航选择菜单效果.   关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左 ...

  4. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  5. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  6. lightinthebox头部分类菜单下拉导航，使鼠标移到See All Categories就显示下拉菜单

    lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...

  7. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  8. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  9. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

随机推荐

  1. 重新学习angularjs--第一篇（入门）

    几乎是一年之前,泛泛接触了angularjs,也做了一些项目,但是时至今日,几乎已经忘记了ng的使用,由于业务需要,近日要攻克这座难关,重新学习.会把学习的一些东西拿出来,记录之. angularjs ...

  2. 脚本检测CDN节点资源是否与源站资源一致

    需求: 1.所有要检测的资源url放到一个单独文件中 2.检测cdn节点资源大小与源站文件大小是否一致 3.随机抽查几个资源,检查md5sum是否一致 4.使用多线程,可配置线程数 代码目录: hex ...

  3. PYTHON-面向对象-练习-王者荣耀 对砍游戏

    # 王者荣耀 对砍游戏# 两个英雄可以对砍 如果血量小于等于0 就GG# 所需的对象# 英雄对象""" 亚瑟 属性 类型 血量 名称 技能 Q 跳起来给你一刀 伤害50 ...

  4. .net core定时任务

    1.HangFire HangFire官网 Hangfire项目实践分享 :  讲解的比较详细 2.Quartz.NET https://www.cnblogs.com/best/p/7658573. ...

  5. OneNET麒麟座应用开发之八：采集大气压力等环境参数

    采集大气压力和温度也是核算大气标准状况下的各种数据的必须参数,为此我们必须知道压力和温度才能计算标准状况下的各种参数,于此我们需要一个既能检测压力也能检测温度的元件. 1.硬件概述 MS5837压力传 ...

  6. 分享一些 Java 无关基础方面的书籍

    个人认为看书有两个点好处: 1. 能出版出来的书一定是经过反复思考,雕琢和审核的,因此从专业性的角度来说,一本好书的价值超其他资料 2. 对着书上的代码自己敲的时候方便 “看完书之后再次提升自我的最好 ...

  7. hdu5443 ST表裸题：求区间最大

    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> #d ...

  8. 【APUE | 7】命令形参、函数

    命令形参 命令行参数是使用main()函数参数来处理的,其中,argc是指传入参数的个数,argv[]是一个指针数组,指向传递给程序的每个参数. 应当指出的是, argv[0]存储程序的名称,argv ...

  9. Timber（对Log类封装的一个工具）

    Timber(对Log类封装的一个工具) https://blog.csdn.net/hzl9966/article/details/51314137 https://www.jianshu.com/ ...

  10. Codeforces Round #428 (Div. 2)

    终于上蓝名了,hahahahaha,虽然这场的 B 题因为脑抽了,少考虑一种情况终判错了,还是很可惜的.. B题本来过来1500个人,终判之后只剩下了200多个,真的有毒!!!! A - Arya a ...