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 相关文章推荐
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
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
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
浅析js中的浮点型运算问题
2014/01/06 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
EJB timer的种类
2014/10/28 面试题
社区助残日活动总结
2014/08/29 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
会议开幕词
2015/01/28 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
高一英语教学反思
2016/03/03 职场文书
2019年个人工作总结范文
2019/03/25 职场文书