<!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. 简单理解Zookeeper的Leader选举【转】

    Leader选举是保证分布式数据一致性的关键所在.Leader选举分为Zookeeper集群初始化启动时选举和Zookeeper集群运行期间Leader重新选举两种情况.在讲解Leader选举前先了解 ...

  2. 福利爬虫妹子图之获取种子url

    import os import uuid from lxml import html import aiofiles import logging from ruia import Spider, ...

  3. mysql系列七、mysql索引优化、搜索引擎选择

    一.建立适当的索引 说起提高数据库性能,索引是最物美价廉的东西了.不用加内存,不用改程序,不用调sql,只要执行个正确的'create index',查询速度就可能提高百倍千倍,这可真有诱惑力.可是天 ...

  4. 自动化监控白皮书——WAS监控

    WebSphere(WAS)是一些大型企业常用的中间件,由于was自身提供的工具有时不能满足多样化的监控需求,而我们又会经常遇到对was进行监控的应用场景,所以我们有必要自己动手做一些was的监控脚本 ...

  5. C# .NET Winform等程序一运行就闪退 不同环境 换到其他电脑，例如XP之类的解决方法。

    我现在写标题就跟写tag一样,方便大家索引. 有时候经常会把.NET写的程序拿到其他客户机,发现直接闪退,啥也不报错..那就很蛋疼,又不可能去装IDE来检测是吧,网上还有很多说啥看系统日志的,什么图标 ...

  6. python 全栈开发，Day61(库的操作,表的操作,数据类型,数据类型(2),完整性约束)

    昨日内容回顾 一.回顾 定义:mysql就是一个基于socket编写的C / S架构的软件 包含: ---服务端软件 - socket服务端 - 本地文件操作 - 解析指令(mysql语句) ---客 ...

  7. Linux学习笔记：使用shell脚本实现ftp的自动上传下载

    在 Linux 下可以利用 Shell 实现 ftp 文件的自动上传和下载,封装至 crontab 更可实现定时调度. 1.ftp自动登录批量下载文件 ##### 从ftp服务器上的/home/dat ...

  8. Android开发之实现多次点击事件

    在Android中给我们提供了单次点击事件.但并没有给我们提供双击,或者实现在一定时间内的多次事件.所以需要我们自己在单机监听上进行修改实现. 有如下两种实现方式: 1.定义一个存贮上一个第一次点击的 ...

  9. 【BZOJ 3294】[Cqoi2011]放棋子

    题解: 一道很经典的组合数+dp 首先考虑f[i][j][k]表示前k种颜色正好占据了i行j列 转移的话就是枚举第k种颜色占据了几行几列 通过自身转移 然后其在内部的相对顺序是不确定的所以要乘以组合数 ...

  10. 【noip模拟赛4】找啊找啊找BF 拓扑排序

    描述 sqybi上次找GF的工作十分不成功,于是依旧单身的他在光棍节前的某天突发奇想,要给自己找一个BF(这里指的是男性的好朋友……),这样既可以和人分享内心的压抑(路人甲:压抑还分享么……),也可以 ...