js+div+css下拉导航菜单完整代码分享


Posted in Javascript onDecember 28, 2016

效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm

js+div+css下拉导航菜单完整代码分享

下拉菜单

js+div+css下拉导航菜单完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css+div+js下拉菜单导航--柯乐义</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{padding:0;margin:0;font-size:12px;color:#fff;font-family:arial, helvetica, sans-serif;background:#fff;}
#nav{padding:0 5px;z-index:1;left:298px;width:600px;position:absolute;top:175px;height:30px;}
#nav li{float:left;text-align:center;}
#nav li a{float:left;width:100px;color:#336601;text-decoration:none;padding:3px 5px 0 5px;}
#nav li a:hover{float:left;width:88px;color:#fff;background:#539d26;text-decoration:none;padding:3px 3px 0 20px;}
.list{font-weight:normal;line-height:20px;text-align:left;padding:4px;}
.menu1{border:#9cdd75 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#336601;padding-top:6px;background:#f1fbec;moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7;}
.menu2{border:#eee8dd 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#999;padding-top:6px;height:18px;background:#f5f5f5;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">Javascript
<div class="list">
<a href="http://keleyi.com/a/bjac/687f154f53ab3aef.htm" target="_blank">js中substring</a><br />
<a href="http://keleyi.com/a/bjac/ff33a0656183eba.htm" target="_blank">客户端代码着色</a><br />
<a href="http://keleyi.com/a/bjac/6e893bbacf5184f3.htm" target="_blank">js实现代码着色</a><br />
<a href="http://keleyi.com/a/bjac/21e2e5321077656f.htm" target="_blank">11个js技巧</a><br />
<a href="http://keleyi.com/a/bjac/d32ac9822ef75ef9.htm" target="_blank">tab切换样式</a><br />
<a href="http://keleyi.com/a/bjac/fca5ac722271d2d5.htm" target="_blank">js获取可见域宽</a><br />
<a href="http://keleyi.com/a/bjac/ade2f3941bd75ba.htm" target="_blank">js导航菜单</a>
</div>
</li>
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">jQuery
<div class="list">
<a href="http://keleyi.com/a/bjac/13639353acde40c.htm" target="_blank">左侧可弹出div</a><br />
<a href="http://keleyi.com/a/bjac/d863921ed93d03ff.htm" target="_blank">jquery修改a标签</a><br />
<a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">纯文本返回顶部</a><br />
<a href="http://keleyi.com/a/bjac/ac398357acb82782.htm" target="_blank">jquery倒计时</a><br />
<a href="http://keleyi.com/a/bjac/88af29335890a287.htm" target="_blank">div(tab)切换</a><br />
<a href="http://keleyi.com/a/bjac/2041333085cb032d.htm" target="_blank">选项卡切换</a><br />
<a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" target="_blank">单行文字滚动</a><br />
<a href="http://keleyi.com/a/bjac/ed5eb8c2959c619e.htm" title="滚动页面时DIV到达顶部时固定在顶部" target="_blank">DIV到顶固定</a><br />
<a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" title="使用jQuery UI修饰title属性的气泡悬浮框" target="_blank">修饰title气泡</a>
</div>
</li>
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">C#
<div class="list">
<a href="http://keleyi.com/a/bjac/e3ce4526c3fcaf8f.htm" target="_blank">删除文本空白行</a><br />
<a href="http://keleyi.com/a/bjac/94190f87387a868a.htm" target="_blank">生成图片验证码</a><br />
<a href="http://keleyi.com/a/bjac/954abc0d69092dc1.htm" title=".NET生成固定长度的唯一字符串(以8位为例)" target="_blank">生成唯一字符串</a><br />
<a href="http://keleyi.com/a/bjac/c4dd6879a4a4fb36.htm" target="_blank">向文件写入文本</a><br />
<a href="http://keleyi.com/a/bjac/d09a76fa32100d7.htm" target="_blank">用IgnoreRoute忽略路径</a><br />
<a href="http://keleyi.com/a/bjac/84d4e8554b88f61.htm" target="_blank">RouteCollection类</a><br />
<a href="http://keleyi.com/a/bjac/c8e988b2eb520f4b.htm" target="_blank">柯乐义图片压缩类</a>
</div>
</li>
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">CMS
<div class="list"><a href="http://keleyi.com/a/bjac/9d5534156d5814fc.htm" target="_blank">KeleyiCMS更新</a><br />
<a href="http://keleyi.com/a/bjac/2916901353b081f1.htm" target="_blank">柯乐义留言板介绍</a>
</div>
</li>
</ul>
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
9个javascript语法高亮插件 推荐
Jul 18 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
vue.js的提示组件
Mar 02 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
javascript实现简单的ajax封装示例
Dec 28 #Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 #Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 #Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 #Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 #Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 #Javascript
基于JS设计12306登录页面
Dec 28 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
我的论坛源代码(四)
2006/10/09 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python如何代码集体右移
2020/07/20 Python
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
.net开发工程师面试题
2014/02/25 面试题
如何唤起类中的一个方法
2013/11/29 面试题
青年文明号口号
2014/06/17 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
自查自纠工作总结
2014/10/15 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
法院个人总结
2015/03/03 职场文书
2015年暑假生活总结
2015/07/13 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书