网站首页
关于深山
客户案例
业务范围
联系深山
网络投票系统
企业网站建设
旅行社网站建设
小程序
留言板
技术文章
许愿墙(qq爱墙)
技术首页
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
asp.net
DIV+CSS
HTML
SEO搜索引擎忧化
下载类信息
个人空间
代码生成
电商
python
页面特效
表格特效
导航菜单
图形特效
表单特效
时间日期
色彩类别
链接特效
网页特效
系统硬件
网站公告
网页学习
技术类文章
网站类信息
订阅本栏目 RSS
您所在的位置:
深山工作室
>
DIV+CSS
> 正文
DIV+CSS做的透明菜单兼容IE、FF等
深山行者个人网站 2009/9/18 17:13:53 深山行者 字体:
大
中
小
浏览 19536
.menuc li {
display:block;
line-height:32px;position:relative;float:left;}/*关键部分*/
以下为详细代码
<!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>DIV+CSS做的透明菜单兼容IE、FF等</title> <style> html,body,div,span,object,h1,h2,h3,h4,h5,h6,table,tr,td,p,img,ul,li,dl,dt,dd {margin:0;padding:0;border:0;} html,body {outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;} html {background:#fff;} body {margin:0 auto;text-align:center;font:normal 12px/160% Tahoma,Arial,宋体,sans-serif;color:#737171;} ul {list-style-type:none;} form,input,select {margin:0;padding:0;font-family:Tahoma,Arial,宋体,sans-serif;font-size:12px;} a:link,a:visited {color:#7E7E7E;text-decoration:none;} a:hover {color:#f00;text-decoration:underline;} /*publict start*/ .clear1 {clear:both;height:0;line-height:0;font-size:0;} #menu {clear:both;height:31px;background:#3f5058 url(./images/menucbg.gif) repeat-x;overflow:hidden;} #menu .tl,#menu .tr,#menu .bl,#menu .br {display:none;} #menu .dy {display:none;} #menu .tc {background:url(./images/menubg.gif) no-repeat left top;width:4px;height:31px;float:left;} #menu .bc {background:url(./images/menubg.gif) no-repeat right top;width:4px;height:31px;float:right;} .menuc {float:left;display:inline;margin:0 0 0 20px;font-weight:bold;position:relative;} .menuc li {display:block;line-height:32px;position:relative;float:left;} .menuc li a {float:left;margin:0 8px;font-size:12px;} .menuc li a span {float:left;color:#fff;padding:0 15px;} .menuc li a:link,.menuc li a:visited {} .menuc li a:hover {} .menuc li a:hover span {color:#fffc00;text-decoration:none;text-decoration:underline;} .menuc .line {float:left;margin-top:2px;width:1px;height:27px;background:#586261 url(./images/menucline.gif) no-repeat;} .menuc .on {} .menuc .on a:link,.menuc .on a:visited {} .menuc .on a:link span,.menuc .on a:visited span {color:#fffc00;font-weight:bold;text-decoration:underline;} .menuc .on a:hover {text-decoration:none;} .menuc a:hover {text-decoration:none;cursor:pointer;} .menuc .menulist {position:absolute;z-index:1000;top:0px;left:0px;margin-top:31px;background:#ebf0f4;line-height:24px;display:none;padding:6px;filter: Alpha(opacity=80);moz-opacity: 0.8;} .menuc .menulist a {display:block;} .menuc .menulist a:link,.menuc .menulist a:visited {white-space:nowrap;color:#000;} .menuc .menulist a:hover {color:#f00;text-decoration:underline;} </style> </head> <body> <!--container start--> <div id="container"> <div id="header"> <script> function over(str){document.getElementById(str).style.display='block'; } function outs(str){document.getElementById(str).style.display='none';} </script> <!---menu start--> <div id="menu"> <div class="tc"><div class="tl"></div><div class="tr"></div></div> <div class="menuc"> <ul> <li class='on'><a href="index.asp" title="网站首页"><span>网站首页</span></a></li> <li class="line"></li> <li onmouseover="over('menulist2');" onmouseout="outs('menulist2');"><a href="infor.asp?id=1" title="公司简介"><span>公司简介</span></a> <div id="menulist2" class="menulist"> <a href="#">关于我们</a><br/> <a href="#">品质与可靠性</a><br/> <a href="#">组织结构</a><br/> <a href="#">规划蓝图</a><br/> </div> </li> <li class="line"></li> <li onmouseover="over('menulist3');" onmouseout="outs('menulist3');"><a href="news.asp?lei=img&id=2" title="产品与服务"><span>产品与服务</span></a> <div id="menulist3" class="menulist"> <a href="#">球形硅微粉</a><br/> <a href="#">结晶硅微粉</a><br/> <a href="#">熔融硅微粉</a><br/> <a href="#">电子级高纯石英砂</a><br/> </div> </li> <li class="line"></li> <li onmouseover="over('menulist4');" onmouseout="outs('menulist4');"><a href="news.asp?id=1" title="技术输出"><span>技术输出</span></a> <div id="menulist4" class="menulist"> <a href="#">技术输出内容</a><br/> <a href="#">工程列举</a><br/> <a href="#">实例照片</a><br/> </div> </li> <li class="line"></li> <li onmouseover="over('menulist5');" onmouseout="outs('menulist5');"><a href="infor.asp?id=3" title="新闻中心"><span>新闻中心</span></a> <div id="menulist5" class="menulist"> <a href="#">公司新闻</a><br/> <a href="#">行业新闻</a><br/> </div> </li> <li class="line"></li> <li onmouseover="over('menulist6');" onmouseout="outs('menulist6');"><a href="infor.asp?id=2" title="人力资源"><span>人力资源</span></a> <div id="menulist6" class="menulist"> <a href="#">招聘信息</a><br/> </div> </li> <li class="line"></li> <li onmouseover="over('menulist7');" onmouseout="outs('menulist7');"><a title="联系方式"><span>联系方式</span></a> <div id="menulist7" class="menulist"> <a href="#">国内市场</a><br/> <a href="#">国外市场</a><br/> </div> </li> </ul> </div> <div class="bc"><div class="bl"></div><div class="br"></div></div> <div class="dy"></div> </div> <!--menu end--> </div> </div> <!--container end--> </body> </html>
前一页:
CSS+ul 实现的柱状图
后一页:
超强的中间自适应,左右固定,有许多值得学习的地方
相关阅读
爱尚学生网
昆山旅游网
另类的title提示文字
佳达国际货运代理有限公司
asp获得当前文件的虚拟物理路径
万家乐
昆山假日旅行社
如何让文本框不出现提交过的表单信息
更多信息>>
栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>
同类信息
jquery设置或获取修改classname
利用css3.0写出一个音乐播放的唱片碟盘的效果
利用css中的scale()实现放大缩小效果
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
更多>>
最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>
随机抽取信息
格式化金钱如果为0增加两个小数点
这个可以做为论坛,也可以做留言板
深山旅行社网站管理系统 v1.4
表单正则表达式
请勿在本地站发布乱七八糟的广告,本站所有的留言与评论全是需要审核的
常用正则表达式集锦
更多标签
热门标签
许愿
vista
弹窗
高
对联
闭合
论坛
用户体验
编辑
进度
Response
县
onload
万年历
hidden
不对齐
max
框 移
改变
关于我们
过滤
右键失效
鎯
排版
filter
省略
ie
效果
三级
em
定制
windows
asp.net
展示
table
留言板
硬件
快捷
展开
滑动
眼睛
ResponseXML
下拉框
执行
经典
mop
jpg
blog
option
考试
免责声明:本站所有资料信息,有部分为本人原创,部分为从网络收集而来,仅供网友查看阅读所用,所有信息版权归信息所有人或所有公司所有
如果信息内容侵犯到您的版权或权益请与我们联系,经确认后我们会立即移除相关内容或链接
Copyright © 2007-2026
深山工作室
All Rights Reserved
服务QQ:
565449214
手机:
13961347334
ICP备案:
苏ICP备15019627号
苏公网安备 32070502010230号