符合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对象描述信息等。…

DDD与批量操作

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

乔布斯死后的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;但是…

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…

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

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

看到这块Google的“墓地”,心中作何感想?| 今日最佳

世界只有3.14 % 的人关注了青少年数学之旅&#xff08;图源网络&#xff0c;侵权删&#xff09;

轻松实现突破网管限制(SoftEther实际应用)

因为公司限制办公室里的机器上网&#xff0c;只能使用一台内网的HTTP代理服务器浏览网站&#xff0c;而且还只能浏览端口为80的网站&#xff0c;想在天空软件站下个软件还只能通过四川的一个服务器下载。实在很郁闷。找了几天的代理工具。先后用过了“通通通”和“SocksOnline”…

看完这些,孩子的学习效率提高10倍

全世界只有3.14 % 的人关注了青少年数学之旅在工作之余&#xff0c;我们大量的碎片时间被手机占据。无意识的刷手机打发无聊&#xff0c;不如有趣又高品质的积累。我们特意精选了在不同领域的几个高品质公众号代表&#xff0c;希望让你在快乐打发闲暇时光的同时&#xff0c;也能…

中国唯一一位女性 Apache Member 潘娟:我们还是要走出自己与众不同的 My Way

The Apache Way 是一种参照&#xff0c;但我们还是要走出自己的与众不同的 My Way。———潘娟ApacheCon 是 Apache 软件基金会&#xff08;ASF&#xff09;的官方全球系列大会。作为久负盛名的开源盛宴&#xff0c;ApacheCon 在开源界备受关注&#xff0c;也是开源运动早期的知…

python seaborn 热图_python – 在seaborn中结合两张热图

在图中并排显示两个seaborn热图的一种可能方式是将它们绘制成单独的子图.可以将子图之间的空间设置为非常小(wspace 0.01),并将相应的颜色条和标记标记定位在该间隙之外.import matplotlib.pyplot as pltimport numpy as npimport pandas as pdimport seaborn as snsdf pd.Da…

Impala入门笔记

From:http://tech.uc.cn/?p817 问题背景&#xff1a; 初步了解Impala的应用重点测试Impala的查询速度是否真的如传说中的比Hive快3~30倍写作目的&#xff1a; 了解Impala的安装过程初步了解Impala的使用比较Impala与Hive的性能测试适合阅读对象&#xff1a; 想了解Impala安装的…

ASP.NET Core 中做集成测试的三种方案

学习进步老张的哲学不定期更新的日常在平时的开发中&#xff0c;我们很少会关注到测试的问题&#xff0c;更别说集成测试了&#xff0c;除非是公司有硬性要求或者是自己的开源项目中&#xff0c;为了整体架构的完整性&#xff0c;需要用测试来做辅助点缀&#xff0c;而更多的也…