欢迎来到藕码网
RSS订阅
|
加入收藏
热门关键词：
html
css
js
asp
php
jsp
.net
菜单导航
图片相册
焦点图
选项卡
首 页
HTML+CSS
JS特效
ASP源码
PHP源码
JSP源码
C#源码
知道中心
百度
谷歌
搜狗
加关注：
新浪微博
腾讯微博
当前位置：
首页
>
HTML+CSS
>
实例
> 源码
CSS打造下拉菜单
发布时间：2013-09-22 10:18 来源/作者：藕码网 分类：实例
TAG标签：
摘要：
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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS下拉菜单实例模块</title> <style> body,ul,li{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;margin:0px; padding:0px;} a{ color:#000000; text-decoration:none;} body{text-align:center; } li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold; float:left;} .list a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px 5px 0px 5px;} .list a:visited{color:#336601;text-decoration:none;float:left;padding:3px 5px 0px 5px;width:100px;} .list a:hover{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#539D26;} .list a:active{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none; background-color:#BD06B4;} #nav{width:600px;height:30px; margin:0 auto;padding:0px 5px; text-align:center; clear:both;} .list{line-height:20px;text-align:left;padding:4px;font-weight:normal;} .menu1{width:120px;height:auto;margin:6px 4px 0px 0px;border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;padding:6px 0px 0px 0px;cursor:hand;overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;} .menu2{width:120px;height:18px;margin:6px 4px 0px 0px;background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;} </style> </head> <body> <br/> <div>大家以后在以后运用时候可以扩展使用，更改为适合自己网页需求<a href="http://www.oucode.com/">css</a>。</div> <br/> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">div+css <div class="list"> <a href="http://www.oucode.com/">DIV CSS</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.oucode.com/html/">HTML入门</a> <div class="list"> <a href="http://www.oucode.com/html/">HTML入门</a><br /> <a href="http://www.oucode.com/html/h5.html">html是什么</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.oucode.com/rumen/">CSS入门</a> <div class="list"> <a href="http://www.oucode.com/">DIVCSS5</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.oucode.com/css-hack/">CSS HACK</a> <div class="list"> <a href="http://www.oucode.com/">DIV+CSS</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> </ul> </div> </body> </html>
素材详情
用户评论
相关文章
CSS下拉菜单实例模块
最新评论
验证码:
2013-09-15
精美竖向手风琴jQuery菜单代码
2013-09-15
仿京东商城分类导航菜单代码
2013-09-15
jquery仿flash上下翻滚特效导航菜单
2013-09-15
精美绿色下拉多级导航
2013-09-15
大气红色二级横向滑动导航菜单
2013-09-15
炫酷jquery黑色导航菜单（仿flash）代码
2013-09-15
CSS+JS弧形二级导航菜单
2013-09-15
无限级绿色下拉导航菜单
2013-09-16
无限级的Asp产品分类菜单程序
2013-09-16
ASP+JS仿CSDN左侧树形菜单代码
2013-09-17
LOGO下拉菜单
2013-09-17
创意CSS3动画菜单
菜单
/ Menu
基础知识
标签属性
CSS3
CSS Hack
CSS技巧
实例
扩展区
其他
热门下载
/ HOT
1
CSS打造下拉菜单
2
CSS自适应宽度圆角按钮
3
CSS圆边圆角(支持IE6-IE9浏览器)
4
搜索框布局实例
5
css让介绍文字、图片内容左右上下居中
6
创意CSS3动画菜单
7
LOGO下拉菜单
