素材首页
GIF
PNG
PSD
矢量
字体
PS样式
PS形状
PS笔刷
代码
特效
背景
模板
Flash
表情头像
站内搜索
当前位置导航：
炫浪网
>>
设计素材
>>
网页特效代码
>>
导航类
简洁实用的下拉菜单
更新时间：2009年07月07日
点击数：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <head> <title>炫浪设计素材-简洁实用的下拉菜单</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> <!-- body { margin: 0px; padding:0px; font:"宋体"; font-size:12px; text-decoration:none } /*注：所有内联padding，和外联margin的数值都可以修改。所有链接地址均为汉字首字母缩写。增加或删除下拉菜单，则直接在相应的span下进行<A>的修改*/ #xiala1, #xiala2, #xiala3, #xiala4, #xiala5, #xiala6, #xiala7{display:none}/*初始，所有下拉隐藏*/ #xiala1 a,#xiala2 a,#xiala3 a,#xiala4 a,#xiala5 a,#xiala6 a,#xiala7 a{color:#fff; text-decoration:none; padding-left:20px; padding-top:8px; float:left;} /*下拉菜单文字样式， color:#fff;表示颜色 text-decoration:none;表示link无下划线 padding-left:20px;内联，左边距， padding-top:8px;内联，上边距 float:left;向左浮动，保持一行 */ #xiala1 a:hover,#xiala2 a:hover,#xiala3 a:hover,#xiala4 a:hover,#xiala5 a:hover,#xiala6 a:hover,#xiala7 a:hover{text-decoration:underline;}/*下拉文字鼠标hover样式，有下划线*/ .menux{ background:#0000FF;height:35px;}/*整体menu背景*/ .menu{margin:0px auto; padding-left:43px;}/*ul，可修改padding-left的数值*/ .menu li{ list-style:none; float:left;}/*不需要修改*/ .menu li a{ display:block; height:23px; width:95px;border-left:1px solid #fff; padding-top:12px; font-size:14px; font-weight:bold; text-align:center; color:#fff; text-decoration:none;}/*menu文字样式。根据需要自行修改，解释如下： display:block;表示文字块状化，使之拥有完整背景，不可修改。 height:23px; width:95px;去掉内联后的宽和高，可修改 border-left:1px solid #fff;左边有一个竖的1px宽，白色的线。循环用，页面内在最后一个加上右边的线，可修改或删除 padding-top:12px;文字内联，作用是垂直居中。可修改，方法：实际高度-文字高度（文字高度即为文字大小）后除以二+1（避免gb2312下文字上边距小于下边距）， font-size:14px; font-weight:bold;表示字体为14号，加粗， text-align:center;表示文本水平居中 color:#fff;颜色 text-decoration:none;链接样式无下划线 */ .menu li a:hover{ background:#00CC33}/*鼠标经过menu文字时的样式*/ .menuxiala{ background:#666666; height:30px; clear:both}/*下拉菜单上级div，可根据修要修改。*/ --> </style> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div class="menux"> <ul class="menu"> <li><a href="#">炫浪首页</a></li> <li><a href="#" onmousemove="xiala1.style.display='block'" onmouseout="xiala1.style.display='none'">课程概况</a></li> <li><a href="#" onmousemove="xiala2.style.display='block'" onmouseout="xiala2.style.display='none'">师资队伍</a></li> <li><a href="#" onmousemove="xiala3.style.display='block'" onmouseout="xiala3.style.display='none'">科学研究</a></li> <li><a href="#" onmousemove="xiala4.style.display='block'" onmouseout="xiala4.style.display='none'">教学研究</a></li> <li><a href="jcjs.asp" onmousemove="xiala5.style.display='block'" onmouseout="xiala5.style.display='none'">理论教学</a></li> <li><a href="#" onmousemove="xiala6.style.display='block'" onmouseout="xiala6.style.display='none'">实践教学</a></li> <li><a href="#" onmousemove="xiala7.style.display='block'" onmouseout="xiala7.style.display='none'">试题集锦</a></li> <li><a href="#" style="border-right:1px solid #fff;">网上答疑</a></li> </ul> </div> <div class="menuxiala"> <span id="xiala1" style="padding-left:14px;" onmousemove="this.style.display='block'" onmouseout="this.style.display='none'"> <a href="#">课程简介</a> <a href="#">教学内容</a> <a href="#">课程建设规划</a> <a href="#">课程改革</a> <a href="#">专家评价</a> <a href="#">学生评价</a> </span> <span id="xiala2" style="padding-left:156px;" onmousemove="this.style.display='block'" onmouseout="this.style.display='none'"> <a href="#">师资队伍</a> <a href="#">课程负责人</a> <a href="#">主讲教师</a> </span> <span id="xiala3" style="padding-left:264px;" onmousemove="this.style.display='block'" onmouseout="this.style.display='none'"> <a href="#">研究条件</a> <a href="#">研究课题</a> <a href="#">研究成果</a> </span> <span id="xiala4" style="padding-left:250px;" onmousemove="this.style.display='block'" onmouseout="this.style.display='none'"> <a href="#">教学条件</a> <a href="#">教学方法与手段</a> <a href="#">教学成果</a> <a href="#">培养方案</a> </span> <span id="xiala5" style="padding-left:216px;" onmousemove="this.style.display='block'" onmouseout="this.style.display='none'"> <a href="#">教学计划</a> <a href="#">课程大纲</a> <a href="#">教材建设</a> <a href="#">教学日历</a> <a href="#">电子教材</a> <a href="#">教学课件</a> <a href="#">授课录象</a> </span> <span id="xiala6" style="padding-left:320px;" onmousemove="this.style.display='block'" onmouseout="this.style.display='none'"> <a href="#"> 实验室简介</a> <a href="#">实验大纲</a> <a href="#">实验教材</a> <a href="#">实验项目</a> <a href="#">实验报告</a> <a href="#">实验预习</a> </span> <span id="xiala7" style="padding-left:620px;" onmousemove="this.style.display='block'" onmouseout="this.style.display='none'"> <a href="#"> 单元自测</a> <a href="#">模拟试题</a> <a href="#">全真试题</a> <a href="#">在线测试</a> </span> </div> </body> </html>
赞助商链接
炫友推荐
紫色梦幻背景与蝴蝶花纹矢量素材
紫色时尚花纹矢量素材
500款实用网站装饰小图标png图标
244个黑色简约风格PNG小图标
时尚手绘花纹psd素材
FZCQJW－中文字体下载
渲染花朵psd分层素材
hzgb2－中文字体下载
杂七杂八的花纹矢量素材
FZCCHJW－中文字体下载
炫浪推广
【注意】炫浪网 版权所有,未经书面授权禁止模仿风格或建立镜像网站.如有违反,追究法律责任.
【声明】本网站部分内容属社区网友发布，本网站仅提供网友交流平台，但有权在本网站范围内引用、发布、
转载来自社区网友发布的内容。网友发布内容纯属个人行为，与本网站立场无关。本网站对于网友发布的
内容所引发的版权、署名权的异议及纠纷，不承担任何责任。 粤ICP备
11064832
号 公安备案编号：4453023010550
