<!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. 再谈：自定义结构体的对齐问题之__attribute__ ((packed))方法【转】

    转自:https://blog.csdn.net/ipromiseu/article/details/5955295 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.c ...

  2. GHOST分区丢失只剩C盘

    很多人装系统时会经常会使用GHOST来恢复自己的系统,当WINDOWS系统出现意外时,再用GHOST的“From Image to 分区”来对系统进行恢复,这样就可以省去繁琐耗时的重新安装操作系统的工 ...

  3. dubbo系列七、dubbo @Activate 注解使用和实现解析

    一.用法 Activate注解表示一个扩展是否被激活(使用),可以放在类定义和方法上,dubbo用它在spi扩展类定义上,表示这个扩展实现激活条件和时机. @Activate(group = Cons ...

  4. oracle的读写分离实现

    在MySQL作为应用系统的后台数据库时,我们常常见到这样的架构,一拖二.一拖三等等.这是用MySQL的读写分离技术,实现数据的写入和读取分别在不同的库上,提升了数据库服务能力. 同样,在Oracle作 ...

  5. git 使用https 和SSH 提交远程库小总结

    一.使用https提交远程库 首先已经git commit -m “注释” 本地仓库关联远程github服务器:git remote add origin  “https://XXXX.git” 提交 ...

  6. Appium+Java（一） Windows环境搭建篇

    准备: Android版本 :4.2.2 nodejs版本:5.6.0 appium版本:v1.4.16 1. 安卓SDK及配置环境变量 1.1.先下载sdk安装包:installer_r24.4.1 ...

  7. Jmeter接口测试参数化实例图文示例

    在实际测试中,不可能查询值测试一个输入值,还有其他测试数据,故引入参数化的概念,让一条用例循环执行,直到所有测试数据均测试完成,如下示例: Jmeter参数化有4种方法,本例仅介绍最普遍及简单的1个方 ...

  8. Codeforces 999F Cards and Joy（二维DP）

    题目链接:http://codeforces.com/problemset/problem/999/F 题目大意:有n个人,n*k张卡牌,每个人会发到k张卡牌,每个人都有一种喜欢的卡牌f[i],当一个 ...

  9. Hibernate之开门见山

    1:SSH框架: Struts2:基于mvc模式的应用层框架模式(Servlet层) Hibernate:基于持久层的框架(数据访问层) Spring:创建对象对象处理的依赖关系以及框架整合(Serv ...

  10. CS224d 单隐层全连接网络处理英文命名实体识别tensorflow

    什么是NER? 命名实体识别(NER)是指识别文本中具有特定意义的实体,主要包括人名.地名.机构名.专有名词等.命名实体识别是信息提取.问答系统.句法分析.机器翻译等应用领域的重要基础工具,作为结构化 ...