符合WEB标准的div+css导航下拉菜单

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52css.com - css菜单演示</title>

<style type="text/css">
<!--
*
{}{margin:0;padding:0;border:0;}
body 
{}{
font-family
: arial, 宋体, serif;
font-size
:12px;
}


#nav 
{}{
line-height
: 24px; list-style-type: none; background:#666;
}


#nav a 
{}{
display
: block; width: 80px; text-align:center;
}


#nav a:link 
{}{
color
:#666; text-decoration:none;
}

#nav a:visited 
{}{
color
:#666;text-decoration:none;
}

#nav a:hover 
{}{
color
:#FFF;text-decoration:none;font-weight:bold;
}


#nav li 
{}{
float
: left; width: 80px; background:#CCC;
}

#nav li a:hover
{}{
background
:#999;
}

#nav li ul 
{}{
line-height
: 27px; list-style-type: none;text-align:left;
left
: -999em; width: 180px; position: absolute;
}

#nav li ul li
{}{
float
: left; width: 180px;
background
: #F6F6F6;
}


#nav li ul a
{}{
display
: block; width: 156px;text-align:left;padding-left:24px;
}


#nav li ul a:link 
{}{
color
:#666; text-decoration:none;
}

#nav li ul a:visited 
{}{
color
:#666;text-decoration:none;
}

#nav li ul a:hover 
{}{
color
:#F3F3F3;text-decoration:none;font-weight:normal;
background
:#C00;
}


#nav li:hover ul 
{}{
left
: auto;
}

#nav li.sfhover ul 
{}{
left
: auto;
}

#content 
{}{
clear
: left;
}

-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++{
sfEls[i].onmouseover
=function() {
this.className+=(this.className.length>0? " """+ "sfhover";
}

sfEls[i].onMouseDown
=function() {
this.className+=(this.className.length>0? " """+ "sfhover";
}

sfEls[i].onMouseUp
=function() {
this.className+=(this.className.length>0? " """+ "sfhover";
}

sfEls[i].onmouseout
=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
}

}

}

window.onload
=menuFix;
//--><!]]></script>
</head>
<body>

<ul id="nav">
<li><a href="http://www.52css.com">产品介绍</a>
<ul>
<li><a href="http://www.52css.com">产品一</a></li>
<li><a href="http://www.52css.com">产品一</a></li>
<li><a href="http://www.52css.com">产品一</a></li>
<li><a href="http://www.52css.com">产品一</a></li>
<li><a href="http://www.52css.com">产品一</a></li>
<li><a href="http://www.52css.com">产品一</a></li>
</ul>
</li>
<li><a href="http://www.52css.com">服务介绍</a>
<ul>
<li><a href="http://www.52css.com">服务二</a></li>
<li><a href="http://www.52css.com">服务二</a></li>
<li><a href="http://www.52css.com">服务二</a></li>
<li><a href="http://www.52css.com">服务二服务二</a></li>
<li><a href="http://www.52css.com">服务二服务二服务二</a></li>
<li><a href="http://www.52css.com">服务二</a></li>
</ul>
</li>
<li><a href="http://www.52css.com">成功案例</a>
<ul>
<li><a href="http://www.52css.com">案例三</a></li>
<li><a href="http://www.52css.com">案例</a></li>
<li><a href="http://www.52css.com">案例三案例三</a></li>
<li><a href="http://www.52css.com">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="http://www.52css.com">关于我们</a>
<ul>
<li><a href="http://www.52css.com">我们四</a></li>
<li><a href="http://www.52css.com">我们四</a></li>
<li><a href="http://www.52css.com">我们四</a></li>
<li><a href="http://www.52css.com">我们四111</a></li>
</ul>
</li>

<li><a href="http://www.52css.com">在线演示</a>
<ul>
<li><a href="http://www.52css.com">演示</a></li>
<li><a href="http://www.52css.com">演示</a></li>
<li><a href="http://www.52css.com">演示</a></li>
<li><a href="http://www.52css.com">演示演示演示</a></li>
<li><a href="http://www.52css.com">演示演示演示</a></li>
<li><a href="http://www.52css.com">演示演示</a></li>
<li><a href="http://www.52css.com">演示演示演示</a></li>
<li><a href="http://www.52css.com">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="http://www.52css.com">联系我们</a>
<ul>
<li><a href="http://www.52css.com">联系联系联系联系联系</a></li>
<li><a href="http://www.52css.com">联系联系联系</a></li>
<li><a href="http://www.52css.com">联系</a></li>
<li><a href="http://www.52css.com">联系联系</a></li>
<li><a href="http://www.52css.com">联系联系</a></li>
<li><a href="http://www.52css.com">联系联系联系</a></li>
<li><a href="http://www.52css.com">联系联系联系</a></li>
</ul>
</li>

</ul>

</body>
</html>

转载于:https://www.cnblogs.com/liuweitoo/archive/2007/10/11/920439.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300615.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入DataGrid分页样式实例

DataGrid提供了分页功能&#xff0c;不过看上去功能有限&#xff0c;但是我们可以通过DataGrid的一些属性来获取状态以及增加首页、尾页功能按钮。这里没有使用DataGrid的自定义分页功能&#xff0c;如果在速度效率不是很讲究的情况下&#xff0c;由DataGrid自己管理分页还是不…

dotnet中的counter

打造一个完善的软件产品&#xff0c;准确完整实现业务是第一步&#xff0c;再有就是有优秀的性能&#xff0c;稳定的运行。为了能量化性能指标&#xff0c;需要利用工具&#xff0c;来收集这些数据&#xff0c;以便对产品作出代码级调整。先说一下.net中带一个全局工具&#xf…

与殿堂级大师隔空对话——一张纸是怎么限制了我们的想象力

▲ 点击查看七天假期&#xff0c;熊孩子在家捣乱的情况实在是太多啦&#xff0c;就一眨眼的功夫&#xff0c;满地的积木&#xff0c;到处都有&#xff0c;还有到处都是的纸张碎片&#xff0c;真真是十分的头疼&#xff01;在蚊子小时候&#xff0c;玩具远不如现在丰富&#x…

Redis学习手册(String数据类型)

2019独角兽企业重金招聘Python工程师标准>>> 一、概述&#xff1a; 字符串类型是Redis中最为基础的数据存储类型&#xff0c;它在Redis中是二进制安全的&#xff0c;这便意味着该类型可以接受任何格式的数据&#xff0c;如JPEG图像数据或Json对象描述信息等。…

获取客户端浏览器信息

alert("appVersion 获取浏览器运行的平台和版本。"myNavigator.appVersion);alert("appCodeName 获取浏览器的代码名称:" myNavigator.appCodeName);alert("appMinorVersion 获取应用程序的次版本值。"myNavigator.appMinorVersion); alert(&quo…

DDD与批量操作

原文链接&#xff1a;https://enterprisecraftsmanship.com/posts/ddd-bulk-operations/将批量操作与领域驱动设计相结合是一个困难的问题。在这篇文章中&#xff0c;我们将看看为什么会这样&#xff0c;并讨论如何结合两个。本文也是对读者提问的回应。这个问题包含一个有趣的…

检查坏道右键单击盘符/属性/工具中的查错。

检查坏道右键单击盘符/属性/工具中的查错。 7.windowsXP系统经常出现错误提示 答&#xff1a;XP系统经常提示是否将错误报告发送到微软公司&#xff0c;有两个选项&#xff1a;发送或不发送&#xff0c;关闭的方法依此是&#xff1a; 进入&#xff1a;开始菜单-----设置---控制…

crt脚本 js 在_crt脚本 js 在_使用SecureCRT自带的脚本录制功能。

建立登录会话并登录服务器开始录制脚本Script -> Start Recording Script输入登录的命令LANGen_US.UTF-8su - usernamePassword:结束录制Script -> Stop Recording Script把脚本存成你喜欢的名字&#xff0c;例如Script.vbs设置登录脚本选中会话&#xff0c;右键Proper…

乔布斯死后的300亿遗产终于被败光了,没想到竟是干了这件事

全世界只有3.14 %的人关注了青少年数学之旅前段时间&#xff0c;果粉们翘首以待的科&#xff08;ping&#xff09;技&#xff08;guo&#xff09;界&#xff08;fa&#xff09;春&#xff08;bu&#xff09;晚&#xff08;hui&#xff09;又如期而至。每年一到新款 iPhone 发布…

博客群发(2)--实现登陆

模板方法 python也是一种面向对象的语言&#xff0c;所以在实现群发的时候&#xff0c;会登陆不同的网站&#xff0c;但是登陆的方法什么的不尽相同&#xff0c;所以这里想到的是模板方法。 模板方法模式&#xff1a; 应用特性&#xff1a;重复做相同逻辑的事情&#xff0c;但是…

晦气

昨天晚上在工行ATM机器上取钱&#xff0c;结果回去一看一张票子及其像假币&#xff0c;虽然是刚从取款机里面去的&#xff0c;但就算是真的&#xff0c;估计也很难用出去吧&#xff0c;唉&#xff0c;只有自认倒霉了&#xff01; 转载于:https://www.cnblogs.com/BlueMagic/arc…

flask取mysql数据很慢_[flask 优化] 由flask-bootstrap,flask-moment引起的访问速度慢的原因及解决办法...

一周时间快速阅读了400页的《javascript基础教程》&#xff0c;理解了主要概念。解决了一个很久之前的疑问。我的网站是使用flask框架搭建的&#xff0c;介绍flask web的一本著名的书(之前提到过)作者搭建个人博客时&#xff0c;向读者推荐了flask-bootstrap,flask_moment这两个…

运维管理工具-- Deploy Assistant

Deploy Assistant 好用的运维管理工具&#xff0c;目前只支持了docker,后续会继续开发手机端&#xff0c;以及其他的功能&#xff0c;如k8s,mysql,redis等。系统采用ssh登录Linux系统&#xff0c;调用docker api的模式开发&#xff0c;支持账号密码&#xff0c;证书登录 支持do…

空调冷冻水系统控制

空调冷冻水系统控制 张红霞 摘要&#xff1a;通过某大厦空调冷冻水系统控制的介绍&#xff0c;表明只有在空调设计人员提供了准确的控制、测量 参数的基础下&#xff0c;才能实现冷水机组自动控制的目的&#xff0c;满足空调的设计要求。 Control of Refrigerating Water Syste…

用Python进行数据探索,探索竞赛优胜方案

全世界只有3.14 %的人关注了青少年数学之旅AI这个词相信大家都非常熟悉&#xff0c;近几年来人工智能圈子格外热闹&#xff0c;光是AlphoGo就让大家对它刮目相看。随着大数据时代信息科技的快速发展&#xff0c;各种各样的数据充斥着我们的生活。而我们又当如何有效利用数据&am…

ubuntu安装phpmyadmin

sudo apt-get install phpmyadmin 这里的phpmyadmin是与我们之前装的php5 是相配合的&#xff0c;如果你装的PHP 和phpmyadmin不相配&#xff0c;它们不会工作。 Step 1.现在我们去解决phpmyadmin“不工作”的问题&#xff0c;当我们安装了phpmyadmin 后&#xff0c;不要以为一…

微结构设计能力看国产CPU发展

当下&#xff0c;国内CPU公司可以大致分为泾渭分明的两条技术路线&#xff0c;分别是自主研发路线和技术引进路线&#xff0c;从实践上看&#xff0c;自主CPU架构改进能力和IPC提升能力要明显优于技术引进CPU&#xff0c;在研发上更具发展后劲。 FT CPU IPC进步相对有限2013年的…

做主管常犯的毛病毛病六:忘了公司的命脉:利润(转)

毛病六&#xff1a;忘了公司的命脉&#xff1a;利润我们都晓得中国在改革开放以后&#xff0c;整个国家迈进市场经济。现在这个话大家都在讲&#xff0c;其实我们稍微客观点观察&#xff0c;就知道我们国家&#xff0c;还没有真正的达到市场经济。我们承不承认&#xff0c;整个…

日历控件

用法如下&#xff1a; 在.aspx.cs为控件添加属性&#xff1a; ibSelDate1.Attributes.Add("onclick", "GetDate1()"); 在.aspx页面调用js文件&#xff1a; <script language"javascript" src"ClientCalendar.js"></script>…

mysql环境搭载后老出错_使用Docker在window10下搭建SWOFT开发环境,mysql连接错误

使用Docker在window10下搭建SWOFT开发环境&#xff0c;mysql连接错误{"code": 0,"error": "(Swoft\\Db\\Exception\\DbException) Pool error is Create connection error(Dsn(mysql:dbnametest;host127.0.0.1:13306) can not to connected!) file(/v…