当前位置：编程学习 > html/css >>

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

答案：






编写纯 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=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  64.     </div> 

  65.     <div class="level"> 

  66.         <div class="levelTitle">level 1</div> 

  67.         <div class="level_"> 

  68.             <div class="level_title">level_ title</div> 

  69.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  70.     </div> 

  71.     <div class="level"> 

  72.         <div class="levelTitle">level 2</div> 

  73.         <div class="level_"> 

  74.             <div class="level_title">level_ title</div> 

  75.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  76.     </div> 

  77.     <div class="level"> 

  78.         <div class="levelTitle">level 3</div> 

  79.         <div class="level_"> 

  80.             <div class="level_title">level_ title</div> 

  81.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  82.     </div> 

  83.     <div class="level"> 

  84.         <div class="levelTitle">level 4</div> 

  85.         <div class="level_"> 

  86.             <div class="level_title">level_ title</div> 

  87.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  88.     </div> 

  89. </div> 

  90. </body> 

  91. </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=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  126.     </div> 

  127.     <div class="level"> 

  128.         <div class="levelTitle">level 1</div> 

  129.         <div class="level_"> 

  130.             <div class="level_title">level_ title</div> 

  131.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  132.     </div> 

  133.     <div class="level"> 

  134.         <div class="levelTitle">level 2</div> 

  135.         <div class="level_"> 

  136.             <div class="level_title">level_ title</div> 

  137.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  138.     </div> 

  139.     <div class="level"> 

  140.         <div class="levelTitle">level 3</div> 

  141.         <div class="level_"> 

  142.             <div class="level_title">level_ title</div> 

  143.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  144.     </div> 

  145.     <div class="level"> 

  146.         <div class="levelTitle">level 4</div> 

  147.         <div class="level_"> 

  148.             <div class="level_title">level_ title</div> 

  149.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  150.     </div> 

  151. </div> 

  152. </body> 

  153. </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=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  64.     </div> 

  65.     <div class="level"> 

  66.         <div class="levelTitle">level 1</div> 

  67.         <div class="level_"> 

  68.             <div class="level_title">level_ title</div> 

  69.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  70.     </div> 

  71.     <div class="level"> 

  72.         <div class="levelTitle">level 2</div> 

  73.         <div class="level_"> 

  74.             <div class="level_title">level_ title</div> 

  75.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  76.     </div> 

  77.     <div class="level"> 

  78.         <div class="levelTitle">level 3</div> 

  79.         <div class="level_"> 

  80.             <div class="level_title">level_ title</div> 

  81.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  82.     </div> 

  83.     <div class="level"> 

  84.         <div class="levelTitle">level 4</div> 

  85.         <div class="level_"> 

  86.             <div class="level_title">level_ title</div> 

  87.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  88.     </div> 

  89. </div> 

  90. </body> 

  91. </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=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  130.     </div> 

  131.     <div class="level"> 

  132.         <div class="levelTitle">level 1</div> 

  133.         <div class="level_"> 

  134.             <div class="level_title">level_ title</div> 

  135.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  136.     </div> 

  137.     <div class="level"> 

  138.         <div class="levelTitle">level 2</div> 

  139.         <div class="level_"> 

  140.             <div class="level_title">level_ title</div> 

  141.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  142.     </div> 

  143.     <div class="level"> 

  144.         <div class="levelTitle">level 3</div> 

  145.         <div class="level_"> 

  146.             <div class="level_title">level_ title</div> 

  147.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  148.     </div> 

  149.     <div class="level"> 

  150.         <div class="levelTitle">level 4</div> 

  151.         <div class="level_"> 

  152.             <div class="level_title">level_ title</div> 

  153.             <a href=>            <a href=>            <a href=>            <a href=>            <a href=>        </div> 

  154.     </div> 

  155. </div> 

  156. </body> 

  157. </html> 


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

4. 预览

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














level




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 




level 1




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 




level 2




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 




level 3




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 




level 4




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 

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














level




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 




level 1




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 




level 2




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 




level 3




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 




level 4




level_ title
level_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5


上一个：制作WEB在线编辑器-插入HTML标签
下一个：解决CSS中 display 与 visibility 的区别

更多图片编程知识:
更多html/css疑问解答：
div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊
css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
css 属性选择器 ie6 不支持吗？
用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：
介绍本学习css的书
wordpress多个CSS样式怎么调用？
这个div 的css是如何编写的
div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？
表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。
dw中html文档为什么无法链接css文档
设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。
我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？
css问题，跪求大大帮忙
请教网页设计高手，如下图的这种css代码怎么写？
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，