navLI鼠标滑上显示下拉导航
<!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鼠标滑上显示下拉导航的更多相关文章
- 实用的 鼠标滑上显示提示信息的jq插件
使用非常简单, 引用 css js文件, 将需要显示提示信息的元素 添加class="tooltip"类名, 在title属性填写提示信息就好了title="啊啊啊啊&q ...
- css样式控制鼠标滑过显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Android实现下拉导航选择菜单效果
本文介绍在Android中如何实现下拉导航选择菜单效果. 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左 ...
- 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- lightinthebox头部分类菜单下拉导航，使鼠标移到See All Categories就显示下拉菜单
lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...
- HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；
1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
随机推荐
- 泰克TDS1000B示波器使用说明
1.前言 本文主要根据泰克官方网站TDS1000B/TDS2000B使用教程视频进行整理. 2.认识你的示波器 TDS1000B带宽从40MHZ到200MHZ,采样率高达2Gbps
- linux 下camera调试笔记【转】
转自:https://blog.csdn.net/kevinx_xu/article/details/8801931 linux camera调试 2011-10-23 10:43:37| 分类: ...
- Linux下函数调用堆栈帧的详细解释【转】
转自:http://blog.chinaunix.net/uid-30339363-id-5116170.html 原文地址:Linux下函数调用堆栈帧的详细解释 作者:cssjtuer http:/ ...
- Salt Document学习笔记1
原文来自Salt Documentation,作者是 Thomas Hatch),我摘抄部分可能今后会用到或适合入门到精通的一些原文段落,简单翻译后发上来,便于查阅和研究 一.原理方面:The net ...
- 转载：第2章 Nginx的配置 概述《深入理解Nginx》（陶辉）
原文:https://book.2cto.com/201304/19623.html Nginx拥有大量官方发布的模块和第三方模块,这些已有的模块可以帮助我们实现Web服务器上很多的功能.使用这些模块 ...
- Go语言规格说明书 之 结构体类型（Struct types）
go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,介绍Go语言的 ...
- urllib处理包的简单使用
我们可以使用urllib.request.urlopen()这个接口函数就可以打开一个网站,读取打印信息 你可以现在终端使用python from urllib import request if _ ...
- jQuery版本的jsonp
1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用js文件时则不 ...
- 洛谷P2239 螺旋矩阵
传送门 分析:将整个矩阵看成 "回" 形状的分层结构,然后进行去层处理,使得要求得 \((i,j)\) 处于最外层,然后再分情况讨论.最外面的一层共有数: $ 4 * n - 4 ...
- SPLAY，LCT学习笔记（三）
前两篇讲述了SPLAY模板操作,这一篇稍微介绍一下SPLAY的实际应用 (其实只有一道题,因为本蒟蒻就写了这一个) 例:bzoj 1014火星人prefix 由于本蒟蒻不会后缀数组,所以题目中给的提示 ...