个人管理功能

在CSDN Blog撰写技术文章，即有机会入选CSDN技术中心，现在就去免费注册！已注册用户，点击登录。

搜索
热门标签

12 网络管理 2 1 移动 net 项目管理 web开发 游戏 开源 汇编 数据库 c/c++ .net java 其他

专题历史

有人说SOA是一种IT策略，有人说SOA是一种架构理念，还有人说SOA是一种服务。SOA到底是什么？它将带来什么？软件产业的变革亦或是新的机遇下的挑战？业界权威专家带领我们一起去深究，去探索。BEA三位重量级专家与您共同探讨SOA

随着WPF/E更名为正式名称Silverlight，以及Silverlight 1.1 Alpha 版本的发布，答案变得清晰，而且令人兴奋！ - 一个跨操作系统，跨浏览器的Web应用平台出现了。Silverlight 这样一个4.5MB的浏览器插件(1.1 Alpha文件)是如何做到的这些的？周岳: SilverLight-Web应用的一道强光

中国移动用户数量在大踏步地发展与增长,根据产业部的数据,仅三月就新增了670万户。预估计6月份之后,中国很快将迎来第五亿手机用户(平均不到3人拥有一台手机)而J2ME做为最重要的手机跨平台技术，凭借Java平台以其良好的开放性和支持能力，得到了众多手机厂商的支持。对众多开发者来说，J2ME程序易于移植，轻松实现“一次编写，到处运行”。J2ME系列开发专题，将带你从最基本的工具安装，环境配置开始，进入移动应用开发的世界。 CSDN移动开发系列之-“J2ME开发实训”

7月31日-8月1日，即将在上海召开甲骨文全球大会•亚太地区会议同期举行的甲骨文开发者大会，这是一项付费参加的面向开发人员的活动。在甲骨文开发者大会期间，您将听到世界一流的专家讲述如何使用Java、.NET、XML和PL/SQL以及Ajax、PHP、Spring、Groovy on Rails等流行技术来简化开发过程。在为期两天的甲骨文开发者大会中，您将能够提高自身的开发技能，扩充知识，参加几十场由专家主持的深入细致的技术讲座并在专家的辅导下进行上机操作、了解高级技能和获得详细指导。在甲骨文开发者大会期间，您有机会直接向业界一流的技术专家和开发人员请教。欢迎参加甲骨文全球大会·2007·亚太地区开发者大会

2007年6月29日，自由软件基金会宣布，其创始人Richard Stallman将在GNU的网站上，在本周太平洋时间星期五上午9点通过视频发布GPLv3。本来，GPL并不是所有开源组织所认可的协议。其从出现以来一直存在争议，GPL被认为是一种“病毒式”的协议，BSD的fans和老牌Unix黑客们认为，他们编写Unix的年头都比GPL声明要长得多，他们更愿意采用比GPL更加的自由的BSD协议。今天，开源社区中有70%左右的项目采用了GPL。很多在开源社区的老牌黑客们认为，Richard Stallman所鼓吹开源软件的言行与当年卡尔·马克思号召产业无产阶级反抗工作的努力如出一辙。在GPLv3的第三版修订案发布时，开源软件团体中的许多成员都反对这种协议。尤其是Linux的核心开发小组，其中29个高级架构师有28个反对这个协议。Linus Torvalds称这个协议有“宗教性质”，并公开反对。而整个软件行业特别是开源社区对GPLv3的争论也愈演愈烈。GPLv3：大教堂和集市的新一轮对抗

2007年7月14日由CSDN与ThoughtWorks联合主办的第二届“敏捷中国”技术大会在北京丽亭华苑酒店召开，多位开源社区和ThoughtWorks公司的技术领袖即将带来精彩的演讲。本次“敏捷中国”技术大会集中展现塑造敏捷企业所需的方方面面：业界领先的敏捷项目管理工具；极大提升软件开发效率的新语言和新框架；数据库领域的敏捷实践；全方位的敏捷项目管理指导；还有身临其境的亲身体验。来自开源社区和ThoughtWorks公司的技术领导者们将带领听众全面感受敏捷企业。“敏捷中国大会”现场直击

从2004年起，在每年的夏季，CSDN都会举办面向中国程序员的大型网上调查活动。这是中国样本最丰富的开发者社区调查，持续、全面和深入地反映了中国开发者社群自身状况、各项技术、工具、产品的使用状况和发展趋势，是完整、准确地了解中国开发者市场的重要参考资料。本次调查覆盖基础信息、.NET、Java、C/C++、Web开发、数据库应用开发、软件工程及项目管理、移动及嵌入式开发、开放源代码、企业信息化等10个领域。还有惊喜大奖等着你哦，赶快进入吧！ 2007中国软件开发者大调查正式启动

推荐作者
  • 大宝大宝

    时间如流水，知惜方成功。

  • SkymanSkyman

    江苏人氏，梅兰芳之老乡。现游学渝州之最...

  • ralph623ralph623

新进作者
  • 冲 s冲 s

  • 小鱼小鱼

  • 棱角棱角

    多年J2EE构架设计与开发经验，专注于企业信息系统建设，精通Java设计模式，并能熟练的运用到企业开发中。 精通Struts与Spring框架。数据库方面精通Oracle数据库，从事过数据库方面的开发以及oracle优化方面的工作。

最新技术图书推荐

更多连载  更多图书

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu

发表日期:2006-12-10
更新日期:2006-12-10
作者文章阅读次数:13673

源自：btbtd (个人网站) 标签：web开发

您认为本文应该得        共有2人参与打分打印|收藏|讨论|投诉

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu 摘要:  本文介绍了使用 CSS 编写适用于 Opera, Firefox, IE 的多风格弹出菜单 说明: 编写 CSS 弹出菜单的要点不外乎当鼠标移到目标上时, 显示出隐藏的标签.  要隐藏的标签使用 display:none; 属性进行隐藏.  触发显示隐藏标签主要使用 :hover 属性, 并用 display:block; 显示隐藏的标签. 但由于浏览器对 CSS 的支持并非一致. 对于 Opera 或者 Firefox, 我们可以编写出纯 CSS 菜单, 他们支持任何标签的 :hover 属性. 而对于 IE 浏览器, :hover 只对 a 标签起作用, 但我们可以使用脚本的 onmouseover, onmouseout 模拟出其他标签的 :hover 属性. 因此编写适用于 IE 的 CSS 弹出菜单必须使用到少许的脚本. 目录: 1. 编写直排右侧弹出的 CSS 菜单.  1.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单 1.2 兼容

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu


摘要: 
本文介绍了使用 CSS 编写适用于 Opera, Firefox, IE 的多风格弹出菜单

说明:
编写 CSS 弹出菜单的要点不外乎当鼠标移到目标上时, 显示出隐藏的标签. 
要隐藏的标签使用 display:none; 属性进行隐藏. 
触发显示隐藏标签主要使用 :hover 属性, 并用 display:block; 显示隐藏的标签.

但由于浏览器对 CSS 的支持并非一致.
对于 Opera 或者 Firefox, 我们可以编写出纯 CSS 菜单, 他们支持任何标签的 :hover 属性.
而对于 IE 浏览器, :hover 只对 a 标签起作用, 但我们可以使用脚本的 onmouseover, onmouseout 模拟出其他标签的 :hover 属性.
因此编写适用于 IE 的 CSS 弹出菜单必须使用到少许的脚本.

目录:
1. 编写直排右侧弹出的 CSS 菜单. 
1.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)

2. 编写横排底部弹出的 CSS 菜单. 
2.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)

3. 结论

4. 预览

shawl.qiu
2006-10-01
http://blog.csdn.net/btbtd

1. 编写直排右侧弹出的 CSS 菜单. 

1.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
    linenum
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. " http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */
  9.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
  10.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
  11.     .pmVerticalRightOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
  12.     .pmVerticalRightOut .level{  /* 定义一级类别属性 */
  13.         width:120px; /* 宽度 */
  14.         height:17; /* 高度 */
  15.         position:relative; /* 显示位置为相对位置 */
  16.         display:block; /* 以块模式显示 */
  17.         background-color:#D8D8D8; /* 背景色 */
  18.         padding:0px 2px; /* 文字内补丁间隔 */
  19.         margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */
  20.     }
  21.     .pmVerticalRightOut .level:hover { /* 当鼠标划过一级菜单时 */
  22.         background-color:#6633FF; /* 背景色 */
  23.         color:#FFFFFF; /* 文字颜色 */
  24.     }
  25.     .pmVerticalRightOut .level_{display:none; /* 默认隐藏二级类别 */}
  26.     
  27.     .pmVerticalRightOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
  28.         display:block; /* 以块显示 */
  29.         left:124px; /* 相对于一级类别显示的位置 */
  30.         width:120px; /* 宽度 */
  31.         height:auto; /* 高度 */
  32.         top:0px; /* 相对于一级类别所在位置的顶端 */
  33.         background-color:#EFEFEF; /* 定义背景色 */
  34.         position:absolute; /* 位置为绝对位置 */
  35.     }
  36.     .pmVerticalRightOut .level:hover .level_ .level_title {
  37.         /* 定义二级类别标题样式 */
  38.         font-weight:bold; /* 字体加粗 */
  39.         background-color:#A7ADFE; /* 背景色 */
  40.         color:white; /* 文字颜色 */
  41.     }
  42.     .pmVerticalRightOut .level:hover .level_ a:hover {
  43.         /* 定义二级类别链接显示样式 */
  44.         background-color:#F83658; /* 背景色 */
  45.         color:white; /* 文字颜色 */
  46.     }
  47.     .pmVerticalRightOut .level_ * { 
  48.         /* 定义所有二级类别通用属性 */
  49.         display:block; /* 以块显示 */
  50.         color:black; /* 文字颜色 */
  51.         padding:0px 2px; /* 内补丁间隔 */
  52.     }
  53. /*]]>*/
  54. </style>
  55. </head>
  56. <body>
  57. <p/><p/><p/><p/><p/>
  58. <div class="pmVerticalRightOut" id="pmVerticalRightOut">
  59.     <div class="level">
  60.         <div class="levelTitle">level</div>
  61.         <div class="level_">
  62.             <div class="level_title">level_ title</div>
  63.             <a href="?cat=level&id=1">level_ title 1</a>
  64.             <a href="?cat=level&id=2">level_ title 2</a>
  65.             <a href="?cat=level&id=3">level_ title 3</a>
  66.             <a href="?cat=level&id=4">level_ title 4</a>
  67.             <a href="?cat=level&id=5">level_ title 5</a>
  68.         </div>
  69.     </div>
  70.     <div class="level">
  71.         <div class="levelTitle">level 1</div>
  72.         <div class="level_">
  73.             <div class="level_title">level_ title</div>
  74.             <a href="?cat=level_1&id=1">level_ title 1</a>
  75.             <a href="?cat=level_1&id=2">level_ title 2</a>
  76.             <a href="?cat=level_1&id=3">level_ title 3</a>
  77.             <a href="?cat=level_1&id=4">level_ title 4</a>
  78.             <a href="?cat=level_1&id=5">level_ title 5</a>
  79.         </div>
  80.     </div>
  81.     <div class="level">
  82.         <div class="levelTitle">level 2</div>
  83.         <div class="level_">
  84.             <div class="level_title">level_ title</div>
  85.             <a href="?cat=level_2&id=1">level_ title 1</a>
  86.             <a href="?cat=level_2&id=2">level_ title 2</a>
  87.             <a href="?cat=level_2&id=3">level_ title 3</a>
  88.             <a href="?cat=level_2&id=4">level_ title 4</a>
  89.             <a href="?cat=level_2&id=5">level_ title 5</a>
  90.         </div>
  91.     </div>
  92.     <div class="level">
  93.         <div class="levelTitle">level 3</div>
  94.         <div class="level_">
  95.             <div class="level_title">level_ title</div>
  96.             <a href="?cat=level_3&id=1">level_ title 1</a>
  97.             <a href="?cat=level_3&id=2">level_ title 2</a>
  98.             <a href="?cat=level_3&id=3">level_ title 3</a>
  99.             <a href="?cat=level_3&id=4">level_ title 4</a>
  100.             <a href="?cat=level_3&id=5">level_ title 5</a>
  101.         </div>
  102.     </div>
  103.     <div class="level">
  104.         <div class="levelTitle">level 4</div>
  105.         <div class="level_">
  106.             <div class="level_title">level_ title</div>
  107.             <a href="?cat=level_4&id=1">level_ title 1</a>
  108.             <a href="?cat=level_4&id=2">level_ title 2</a>
  109.             <a href="?cat=level_4&id=3">level_ title 3</a>
  110.             <a href="?cat=level_4&id=4">level_ title 4</a>
  111.             <a href="?cat=level_4&id=5">level_ title 5</a>
  112.         </div>
  113.     </div>
  114. </div>
  115. </body>
  116. </html>

1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)
    linenum
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. " http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */
  9.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
  10.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
  11.     /* ------------------- start 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
  12.     .pmVerticalRightOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
  13.     .pmVerticalRightOut .level{  /* 定义一级类别属性 */
  14.         width:120px; /* 宽度 */
  15.         height:17; /* 高度 */
  16.         position:relative; /* 显示位置为相对位置 */
  17.         display:block; /* 以块模式显示 */
  18.         background-color:#D8D8D8; /* 背景色 */
  19.         padding:0px 2px; /* 文字内补丁间隔 */
  20.         margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */
  21.     }
  22.     .pmVerticalRightOut .level:hover { /* 当鼠标划过一级菜单时 */
  23.         background-color:#6633FF; /* 背景色 */
  24.         color:#FFFFFF; /* 文字颜色 */
  25.     }
  26.     .pmVerticalRightOut .level_{display:none; /* 默认隐藏二级类别 */}
  27.     
  28.     .pmVerticalRightOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
  29.         display:block; /* 以块显示 */
  30.         left:124px; /* 相对于一级类别显示的位置 */
  31.         width:120px; /* 宽度 */
  32.         height:auto; /* 高度 */
  33.         top:0px; /* 相对于一级类别所在位置的顶端 */
  34.         background-color:#EFEFEF; /* 定义背景色 */
  35.         position:absolute; /* 位置为绝对位置 */
  36.     }
  37.     .pmVerticalRightOut .level:hover .level_ .level_title {
  38.         /* 定义二级类别标题样式 */
  39.         font-weight:bold; /* 字体加粗 */
  40.         background-color:#A7ADFE; /* 背景色 */
  41.         color:white; /* 文字颜色 */
  42.     }
  43.     .pmVerticalRightOut .level:hover .level_ a:hover {
  44.         /* 定义二级类别链接显示样式 */
  45.         background-color:#F83658; /* 背景色 */
  46.         color:white; /* 文字颜色 */
  47.     }
  48.     .pmVerticalRightOut .level:hover .level_ * { 
  49.         /* 定义所有二级类别通用属性 */
  50.         display:block; /* 以块显示 */
  51.         color:black; /* 文字颜色 */
  52.         padding:0px 2px; /* 内补丁间隔 */
  53.     }
  54.     /* ------------------- end 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
  55.     
  56.     /* ------------------- start 针对 IE 的 CSS 弹出菜单 -------------------*/
  57.     .levelIe{  /* 定义一级类别属性 */
  58.         width:120px; /* 宽度 */
  59.         height:17; /* 高度 */
  60.         position:relative; /* 显示位置为相对位置 */
  61.         display:block; /* 以块模式显示 */
  62.         background-color:#D8D8D8; /* 背景色 */
  63.         padding:0px 2px; /* 文字内补丁间隔 */
  64.         margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */
  65.     }
  66.     .levelIe .level_ { /* 鼠标划过时触发显示二级类别 */
  67.         display:block; /* 以块显示 */
  68.         left:124px; /* 相对于一级类别显示的位置 */
  69.         width:120px; /* 宽度 */
  70.         height:auto; /* 高度 */
  71.         top:0px; /* 相对于一级类别所在位置的顶端 */
  72.         background-color:#EFEFEF; /* 定义背景色 */
  73.         position:absolute; /* 位置为绝对位置 */
  74.     }
  75.     .levelIe .level_ .level_title {
  76.         /* 定义二级类别标题样式 */
  77.         font-weight:bold; /* 字体加粗 */
  78.         background-color:#A7ADFE; /* 背景色 */
  79.         color:white; /* 文字颜色 */
  80.     }
  81.     .levelIe .level_ a:hover {
  82.         /* 定义二级类别链接显示样式 */
  83.         background-color:#F83658; /* 背景色 */
  84.         color:white; /* 文字颜色 */
  85.     }
  86.     .levelIe .level_ * { 
  87.         /* 定义所有二级类别通用属性 */
  88.         display:block; /* 以块显示 */
  89.         color:black; /* 文字颜色 */
  90.         padding:0px 2px; /* 内补丁间隔 */
  91.     }
  92.     /* ------------------- end 针对 IE 的 CSS 弹出菜单 -------------------*/
  93. /*]]>*/
  94. </style>
  95. <script type="text/javascript">
  96. //<![CDATA[
  97. if (navigator.appName=="Microsoft Internet Explorer") {
  98.     function fPmVerticalRightOut() {
  99.         var getItem = document.getElementById("pmVerticalRightOut").getElementsByTagName("div");
  100.         for (var i=0; i<getItem.length; i++) {
  101.             getItem[i].onmouseover=function() { 
  102.                 if(    this.className=="level"){
  103.                     this.className="levelIe";
  104.                 }
  105.             }
  106.             getItem[i].onmouseout=function() { 
  107.                 if(    this.className=="levelIe"){
  108.                     this.className="level";
  109.                 }
  110.             }//css popup menu script by shawl.qiu
  111.         }
  112.     }
  113.     window.onload=fPmVerticalRightOut;
  114. }
  115. //]]>
  116. </script>
  117. </head>
  118. <body>
  119. <p/><p/><p/><p/><p/>
  120. <div class="pmVerticalRightOut" id="pmVerticalRightOut">
  121.     <div class="level">
  122.         <div class="levelTitle">level</div>
  123.         <div class="level_">
  124.             <div class="level_title">level_ title</div>
  125.             <a href="?cat=level&id=1">level_ title 1</a>
  126.             <a href="?cat=level&id=2">level_ title 2</a>
  127.             <a href="?cat=level&id=3">level_ title 3</a>
  128.             <a href="?cat=level&id=4">level_ title 4</a>
  129.             <a href="?cat=level&id=5">level_ title 5</a>
  130.         </div>
  131.     </div>
  132.     <div class="level">
  133.         <div class="levelTitle">level 1</div>
  134.         <div class="level_">
  135.             <div class="level_title">level_ title</div>
  136.             <a href="?cat=level_1&id=1">level_ title 1</a>
  137.             <a href="?cat=level_1&id=2">level_ title 2</a>
  138.             <a href="?cat=level_1&id=3">level_ title 3</a>
  139.             <a href="?cat=level_1&id=4">level_ title 4</a>
  140.             <a href="?cat=level_1&id=5">level_ title 5</a>
  141.         </div>
  142.     </div>
  143.     <div class="level">
  144.         <div class="levelTitle">level 2</div>
  145.         <div class="level_">
  146.             <div class="level_title">level_ title</div>
  147.             <a href="?cat=level_2&id=1">level_ title 1</a>
  148.             <a href="?cat=level_2&id=2">level_ title 2</a>
  149.             <a href="?cat=level_2&id=3">level_ title 3</a>
  150.             <a href="?cat=level_2&id=4">level_ title 4</a>
  151.             <a href="?cat=level_2&id=5">level_ title 5</a>
  152.         </div>
  153.     </div>
  154.     <div class="level">
  155.         <div class="levelTitle">level 3</div>
  156.         <div class="level_">
  157.             <div class="level_title">level_ title</div>
  158.             <a href="?cat=level_3&id=1">level_ title 1</a>
  159.             <a href="?cat=level_3&id=2">level_ title 2</a>
  160.             <a href="?cat=level_3&id=3">level_ title 3</a>
  161.             <a href="?cat=level_3&id=4">level_ title 4</a>
  162.             <a href="?cat=level_3&id=5">level_ title 5</a>
  163.         </div>
  164.     </div>
  165.     <div class="level">
  166.         <div class="levelTitle">level 4</div>
  167.         <div class="level_">
  168.             <div class="level_title">level_ title</div>
  169.             <a href="?cat=level_4&id=1">level_ title 1</a>
  170.             <a href="?cat=level_4&id=2">level_ title 2</a>
  171.             <a href="?cat=level_4&id=3">level_ title 3</a>
  172.             <a href="?cat=level_4&id=4">level_ title 4</a>
  173.             <a href="?cat=level_4&id=5">level_ title 5</a>
  174.         </div>
  175.     </div>
  176. </div>
  177. </body>
  178. </html>

2. 编写横排底部弹出的 CSS 菜单. 

2.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
    linenum
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. " http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */
  9.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
  10.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
  11.     .pmHorizontalBottomOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
  12.     .pmHorizontalBottomOut .level{  /* 定义一级类别属性 */
  13.         width:120px; /* 宽度 */
  14.         height:17; /* 高度 */
  15.         position:relative; /* 显示位置为相对位置 */
  16.         display:block; /* 以块模式显示 */
  17.         background-color:#D8D8D8; /* 背景色 */
  18.         padding:0px 2px; /* 文字内补丁间隔 */
  19.         margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */
  20.         float:left;
  21.     }
  22.     .pmHorizontalBottomOut .level:hover { /* 当鼠标划过一级菜单时 */
  23.         background-color:#6633FF; /* 背景色 */
  24.         color:#FFFFFF; /* 文字颜色 */
  25.     }
  26.     .pmHorizontalBottomOut .level_{display:none; /* 默认隐藏二级类别 */}
  27.     
  28.     .pmHorizontalBottomOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
  29.         display:block; /* 以块显示 */
  30.         width:124px; /* 宽度 */
  31.         height:auto; /* 高度 */
  32.         margin:0px -2px 0px -2px; /* 外补丁 */
  33.         background-color:#EFEFEF; /* 定义背景色 */
  34.         position:absolute; /* 位置为绝对位置 */
  35.     }
  36.     .pmHorizontalBottomOut .level:hover .level_ .level_title {
  37.         /* 定义二级类别标题样式 */
  38.         font-weight:bold; /* 字体加粗 */
  39.         background-color:#A7ADFE; /* 背景色 */
  40.         color:white; /* 文字颜色 */
  41.     }
  42.     .pmHorizontalBottomOut .level:hover .level_ a:hover {
  43.         /* 定义二级类别链接显示样式 */
  44.         background-color:#F83658; /* 背景色 */
  45.         color:white; /* 文字颜色 */
  46.     }
  47.     .pmHorizontalBottomOut .level_ * { 
  48.         /* 定义所有二级类别通用属性 */
  49.         display:block; /* 以块显示 */
  50.         color:black; /* 文字颜色 */
  51.         padding:0px 2px; /* 内补丁间隔 */
  52.     }
  53. /*]]>*/
  54. </style>
  55. </head>
  56. <body>
  57. <p/><p/><p/><p/><p/>
  58. <div class="pmHorizontalBottomOut" id="pmHorizontalBottomOut">
  59.     <div class="level">
  60.         <div class="levelTitle">level</div>
  61.         <div class="level_">
  62.             <div class="level_title">level_ title</div>
  63.             <a href="?cat=level&id=1">level_ title 1</a>
  64.             <a href="?cat=level&id=2">level_ title 2</a>
  65.             <a href="?cat=level&id=3">level_ title 3</a>
  66.             <a href="?cat=level&id=4">level_ title 4</a>
  67.             <a href="?cat=level&id=5">level_ title 5</a>
  68.         </div>
  69.     </div>
  70.     <div class="level">
  71.         <div class="levelTitle">level 1</div>
  72.         <div class="level_">
  73.             <div class="level_title">level_ title</div>
  74.             <a href="?cat=level_1&id=1">level_ title 1</a>
  75.             <a href="?cat=level_1&id=2">level_ title 2</a>
  76.             <a href="?cat=level_1&id=3">level_ title 3</a>
  77.             <a href="?cat=level_1&id=4">level_ title 4</a>
  78.             <a href="?cat=level_1&id=5">level_ title 5</a>
  79.         </div>
  80.     </div>
  81.     <div class="level">
  82.         <div class="levelTitle">level 2</div>
  83.         <div class="level_">
  84.             <div class="level_title">level_ title</div>
  85.             <a href="?cat=level_2&id=1">level_ title 1</a>
  86.             <a href="?cat=level_2&id=2">level_ title 2</a>
  87.             <a href="?cat=level_2&id=3">level_ title 3</a>
  88.             <a href="?cat=level_2&id=4">level_ title 4</a>
  89.             <a href="?cat=level_2&id=5">level_ title 5</a>
  90.         </div>
  91.     </div>
  92.     <div class="level">
  93.         <div class="levelTitle">level 3</div>
  94.         <div class="level_">
  95.             <div class="level_title">level_ title</div>
  96.             <a href="?cat=level_3&id=1">level_ title 1</a>
  97.             <a href="?cat=level_3&id=2">level_ title 2</a>
  98.             <a href="?cat=level_3&id=3">level_ title 3</a>
  99.             <a href="?cat=level_3&id=4">level_ title 4</a>
  100.             <a href="?cat=level_3&id=5">level_ title 5</a>
  101.         </div>
  102.     </div>
  103.     <div class="level">
  104.         <div class="levelTitle">level 4</div>
  105.         <div class="level_">
  106.             <div class="level_title">level_ title</div>
  107.             <a href="?cat=level_4&id=1">level_ title 1</a>
  108.             <a href="?cat=level_4&id=2">level_ title 2</a>
  109.             <a href="?cat=level_4&id=3">level_ title 3</a>
  110.             <a href="?cat=level_4&id=4">level_ title 4</a>
  111.             <a href="?cat=level_4&id=5">level_ title 5</a>
  112.         </div>
  113.     </div>
  114. </div>
  115. </body>
  116. </html>

2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)
    linenum
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. " http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */
  9.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
  10.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
  11.     /* ------------------- start 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
  12.     .pmHorizontalBottomOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
  13.     .pmHorizontalBottomOut .level{  /* 定义一级类别属性 */
  14.         width:120px; /* 宽度 */
  15.         height:17; /* 高度 */
  16.         position:relative; /* 显示位置为相对位置 */
  17.         display:block; /* 以块模式显示 */
  18.         background-color:#D8D8D8; /* 背景色 */
  19.         padding:0px 2px; /* 文字内补丁间隔 */
  20.         margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */
  21.         float:left;
  22.     }
  23.     .pmHorizontalBottomOut .level:hover { /* 当鼠标划过一级菜单时 */
  24.         background-color:#6633FF; /* 背景色 */
  25.         color:#FFFFFF; /* 文字颜色 */
  26.     }
  27.     .pmHorizontalBottomOut .level_{display:none; /* 默认隐藏二级类别 */}
  28.     
  29.     .pmHorizontalBottomOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
  30.         display:block; /* 以块显示 */
  31.         width:124px; /* 宽度 */
  32.         height:auto; /* 高度 */
  33.         margin:0px -2px 0px -2px; /* 外补丁 */
  34.         background-color:#EFEFEF; /* 定义背景色 */
  35.         position:absolute; /* 位置为绝对位置 */
  36.     }
  37.     .pmHorizontalBottomOut .level:hover .level_ .level_title {
  38.         /* 定义二级类别标题样式 */
  39.         font-weight:bold; /* 字体加粗 */
  40.         background-color:#A7ADFE; /* 背景色 */
  41.         color:white; /* 文字颜色 */
  42.     }
  43.     .pmHorizontalBottomOut .level:hover .level_ a:hover {
  44.         /* 定义二级类别链接显示样式 */
  45.         background-color:#F83658; /* 背景色 */
  46.         color:white; /* 文字颜色 */
  47.     }
  48.     .pmHorizontalBottomOut .level_ * { 
  49.         /* 定义所有二级类别通用属性 */
  50.         display:block; /* 以块显示 */
  51.         color:black; /* 文字颜色 */
  52.         padding:0px 2px; /* 内补丁间隔 */
  53.     }
  54.     /* ------------------- end 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
  55.     
  56.     /* ------------------- start 针对 IE 的 CSS 弹出菜单 -------------------*/
  57.     .levelIe{  /* 定义一级类别属性 */
  58.         width:120px; /* 宽度 */
  59.         height:17; /* 高度 */
  60.         position:relative; /* 显示位置为相对位置 */
  61.         display:block; /* 以块模式显示 */
  62.         background-color:#D8D8D8; /* 背景色 */
  63.         padding:0px 2px; /* 文字内补丁间隔 */
  64.         margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */
  65.         float:left;
  66.     }
  67.     .levelIe { /* 当鼠标划过一级菜单时 */
  68.         background-color:#6633FF; /* 背景色 */
  69.         color:#FFFFFF; /* 文字颜色 */
  70.     }
  71.     .levelIe .level_ { /* 鼠标划过时触发显示二级类别 */
  72.         display:block; /* 以块显示 */
  73.         width:124px; /* 宽度 */
  74.         height:auto; /* 高度 */
  75.         margin:0px -2px 0px -2px; /* 外补丁 */
  76.         background-color:#EFEFEF; /* 定义背景色 */
  77.         position:absolute; /* 位置为绝对位置 */
  78.     }
  79.     .levelIe .level_ .level_title {
  80.         /* 定义二级类别标题样式 */
  81.         font-weight:bold; /* 字体加粗 */
  82.         background-color:#A7ADFE; /* 背景色 */
  83.         color:white; /* 文字颜色 */
  84.     }
  85.     .levelIe .level_ a:hover {
  86.         /* 定义二级类别链接显示样式 */
  87.         background-color:#F83658; /* 背景色 */
  88.         color:white; /* 文字颜色 */
  89.     }
  90.     .levelIe .level_ * { 
  91.         /* 定义所有二级类别通用属性 */
  92.         display:block; /* 以块显示 */
  93.         color:black; /* 文字颜色 */
  94.         padding:0px 2px; /* 内补丁间隔 */
  95.     }
  96.     /* ------------------- end 针对 IE 的 CSS 弹出菜单 -------------------*/
  97. /*]]>*/
  98. </style>
  99. <script type="text/javascript">
  100. //<![CDATA[
  101. if (navigator.appName=="Microsoft Internet Explorer") {
  102.     function fPmHorizontalBottomOut() {
  103.         var getItem = document.getElementById("pmHorizontalBottomOut").getElementsByTagName("div");
  104.         for (var i=0; i<getItem.length; i++) {
  105.             getItem[i].onmouseover=function() { 
  106.                 if(    this.className=="level"){
  107.                     this.className="levelIe";
  108.                 }
  109.             }
  110.             getItem[i].onmouseout=function() { 
  111.                 if(    this.className=="levelIe"){
  112.                     this.className="level";
  113.                 }
  114.             }//css popup menu script by shawl.qiu
  115.         }
  116.     }
  117.     window.onload=fPmHorizontalBottomOut;
  118. }
  119. //]]>
  120. </script>
  121. </head>
  122. <body>
  123. <p/><p/><p/><p/><p/>
  124. <div class="pmHorizontalBottomOut" id="pmHorizontalBottomOut">
  125.     <div class="level">
  126.         <div class="levelTitle">level</div>
  127.         <div class="level_">
  128.             <div class="level_title">level_ title</div>
  129.             <a href="?cat=level&id=1">level_ title 1</a>
  130.             <a href="?cat=level&id=2">level_ title 2</a>
  131.             <a href="?cat=level&id=3">level_ title 3</a>
  132.             <a href="?cat=level&id=4">level_ title 4</a>
  133.             <a href="?cat=level&id=5">level_ title 5</a>
  134.         </div>
  135.     </div>
  136.     <div class="level">
  137.         <div class="levelTitle">level 1</div>
  138.         <div class="level_">
  139.             <div class="level_title">level_ title</div>
  140.             <a href="?cat=level_1&id=1">level_ title 1</a>
  141.             <a href="?cat=level_1&id=2">level_ title 2</a>
  142.             <a href="?cat=level_1&id=3">level_ title 3</a>
  143.             <a href="?cat=level_1&id=4">level_ title 4</a>
  144.             <a href="?cat=level_1&id=5">level_ title 5</a>
  145.         </div>
  146.     </div>
  147.     <div class="level">
  148.         <div class="levelTitle">level 2</div>
  149.         <div class="level_">
  150.             <div class="level_title">level_ title</div>
  151.             <a href="?cat=level_2&id=1">level_ title 1</a>
  152.             <a href="?cat=level_2&id=2">level_ title 2</a>
  153.             <a href="?cat=level_2&id=3">level_ title 3</a>
  154.             <a href="?cat=level_2&id=4">level_ title 4</a>
  155.             <a href="?cat=level_2&id=5">level_ title 5</a>
  156.         </div>
  157.     </div>
  158.     <div class="level">
  159.         <div class="levelTitle">level 3</div>
  160.         <div class="level_">
  161.             <div class="level_title">level_ title</div>
  162.             <a href="?cat=level_3&id=1">level_ title 1</a>
  163.             <a href="?cat=level_3&id=2">level_ title 2</a>
  164.             <a href="?cat=level_3&id=3">level_ title 3</a>
  165.             <a href="?cat=level_3&id=4">level_ title 4</a>
  166.             <a href="?cat=level_3&id=5">level_ title 5</a>
  167.         </div>
  168.     </div>
  169.     <div class="level">
  170.         <div class="levelTitle">level 4</div>
  171.         <div class="level_">
  172.             <div class="level_title">level_ title</div>
  173.             <a href="?cat=level_4&id=1">level_ title 1</a>
  174.             <a href="?cat=level_4&id=2">level_ title 2</a>
  175.             <a href="?cat=level_4&id=3">level_ title 3</a>
  176.             <a href="?cat=level_4&id=4">level_ title 4</a>
  177.             <a href="?cat=level_4&id=5">level_ title 5</a>
  178.         </div>
  179.     </div>
  180. </div>
  181. </body>
  182. </html>


3. 结论
以上例子可以看出, 如果已经编写出一个可用的CSS弹出菜单例子, 那要编写出弹出位置在其他地方的 CSS 弹出菜单的话, 只须小小修改一下就 OK. 

4. 预览

4.1 1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览

4.2 2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览


您认为本文应该得        共有2人参与打分打印|收藏|讨论|投诉

暂无图片

这是什么,是存档.

作者其他文章： 更多
相关文章：
评论

CSDN技术中心团队官方Blog：http://blog.csdn.net/techcenter/，反馈邮箱：techcenter at csdn.net （注意：请把 at 换成@）

网站简介－广告服务－网站地图－帮助－联系方式－诚聘英才－English－问题报告

北京创新乐知广告有限公司 版权所有, 京 ICP 证 070598 号

世纪乐知(北京)网络技术有限公司 提供技术支持

Copyright © 2000-2008, CSDN.NET, All Rights Reserved