400-1100-266

9:00-24:00（工作日）
主页 > 知识库 > 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu

编写纯 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="?cat=levelid=1">level_ title 1/a>
  64.             a href="?cat=levelid=2">level_ title 2/a>
  65.             a href="?cat=levelid=3">level_ title 3/a>
  66.             a href="?cat=levelid=4">level_ title 4/a>
  67.             a href="?cat=levelid=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_1id=1">level_ title 1/a>
  75.             a href="?cat=level_1id=2">level_ title 2/a>
  76.             a href="?cat=level_1id=3">level_ title 3/a>
  77.             a href="?cat=level_1id=4">level_ title 4/a>
  78.             a href="?cat=level_1id=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_2id=1">level_ title 1/a>
  86.             a href="?cat=level_2id=2">level_ title 2/a>
  87.             a href="?cat=level_2id=3">level_ title 3/a>
  88.             a href="?cat=level_2id=4">level_ title 4/a>
  89.             a href="?cat=level_2id=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_3id=1">level_ title 1/a>
  97.             a href="?cat=level_3id=2">level_ title 2/a>
  98.             a href="?cat=level_3id=3">level_ title 3/a>
  99.             a href="?cat=level_3id=4">level_ title 4/a>
  100.             a href="?cat=level_3id=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_4id=1">level_ title 1/a>
  108.             a href="?cat=level_4id=2">level_ title 2/a>
  109.             a href="?cat=level_4id=3">level_ title 3/a>
  110.             a href="?cat=level_4id=4">level_ title 4/a>
  111.             a href="?cat=level_4id=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; igetItem.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=levelid=1">level_ title 1/a>
  126.             a href="?cat=levelid=2">level_ title 2/a>
  127.             a href="?cat=levelid=3">level_ title 3/a>
  128.             a href="?cat=levelid=4">level_ title 4/a>
  129.             a href="?cat=levelid=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_1id=1">level_ title 1/a>
  137.             a href="?cat=level_1id=2">level_ title 2/a>
  138.             a href="?cat=level_1id=3">level_ title 3/a>
  139.             a href="?cat=level_1id=4">level_ title 4/a>
  140.             a href="?cat=level_1id=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_2id=1">level_ title 1/a>
  148.             a href="?cat=level_2id=2">level_ title 2/a>
  149.             a href="?cat=level_2id=3">level_ title 3/a>
  150.             a href="?cat=level_2id=4">level_ title 4/a>
  151.             a href="?cat=level_2id=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_3id=1">level_ title 1/a>
  159.             a href="?cat=level_3id=2">level_ title 2/a>
  160.             a href="?cat=level_3id=3">level_ title 3/a>
  161.             a href="?cat=level_3id=4">level_ title 4/a>
  162.             a href="?cat=level_3id=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_4id=1">level_ title 1/a>
  170.             a href="?cat=level_4id=2">level_ title 2/a>
  171.             a href="?cat=level_4id=3">level_ title 3/a>
  172.             a href="?cat=level_4id=4">level_ title 4/a>
  173.             a href="?cat=level_4id=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=levelid=1">level_ title 1/a>
  64.             a href="?cat=levelid=2">level_ title 2/a>
  65.             a href="?cat=levelid=3">level_ title 3/a>
  66.             a href="?cat=levelid=4">level_ title 4/a>
  67.             a href="?cat=levelid=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_1id=1">level_ title 1/a>
  75.             a href="?cat=level_1id=2">level_ title 2/a>
  76.             a href="?cat=level_1id=3">level_ title 3/a>
  77.             a href="?cat=level_1id=4">level_ title 4/a>
  78.             a href="?cat=level_1id=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_2id=1">level_ title 1/a>
  86.             a href="?cat=level_2id=2">level_ title 2/a>
  87.             a href="?cat=level_2id=3">level_ title 3/a>
  88.             a href="?cat=level_2id=4">level_ title 4/a>
  89.             a href="?cat=level_2id=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_3id=1">level_ title 1/a>
  97.             a href="?cat=level_3id=2">level_ title 2/a>
  98.             a href="?cat=level_3id=3">level_ title 3/a>
  99.             a href="?cat=level_3id=4">level_ title 4/a>
  100.             a href="?cat=level_3id=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_4id=1">level_ title 1/a>
  108.             a href="?cat=level_4id=2">level_ title 2/a>
  109.             a href="?cat=level_4id=3">level_ title 3/a>
  110.             a href="?cat=level_4id=4">level_ title 4/a>
  111.             a href="?cat=level_4id=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; igetItem.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=levelid=1">level_ title 1/a>
  130.             a href="?cat=levelid=2">level_ title 2/a>
  131.             a href="?cat=levelid=3">level_ title 3/a>
  132.             a href="?cat=levelid=4">level_ title 4/a>
  133.             a href="?cat=levelid=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_1id=1">level_ title 1/a>
  141.             a href="?cat=level_1id=2">level_ title 2/a>
  142.             a href="?cat=level_1id=3">level_ title 3/a>
  143.             a href="?cat=level_1id=4">level_ title 4/a>
  144.             a href="?cat=level_1id=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_2id=1">level_ title 1/a>
  152.             a href="?cat=level_2id=2">level_ title 2/a>
  153.             a href="?cat=level_2id=3">level_ title 3/a>
  154.             a href="?cat=level_2id=4">level_ title 4/a>
  155.             a href="?cat=level_2id=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_3id=1">level_ title 1/a>
  163.             a href="?cat=level_3id=2">level_ title 2/a>
  164.             a href="?cat=level_3id=3">level_ title 3/a>
  165.             a href="?cat=level_3id=4">level_ title 4/a>
  166.             a href="?cat=level_3id=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_4id=1">level_ title 1/a>
  174.             a href="?cat=level_4id=2">level_ title 2/a>
  175.             a href="?cat=level_4id=3">level_ title 3/a>
  176.             a href="?cat=level_4id=4">level_ title 4/a>
  177.             a href="?cat=level_4id=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 弹出菜单(脚本实现) 的预览
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


您可能感兴趣的文章:
  • Js+DVML很酷漂亮实用的右键弹出菜单
  • 无js5款纯div+css制作的弹出菜单标准
  • jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
  • js 弹出菜单/窗口效果
  • android popwindow实现左侧弹出菜单层及PopupWindow主要方法介绍
  • Android之用PopupWindow实现弹出菜单的方法详解
  • Android ListView长按弹出菜单二种实现方式示例
  • Android实现类似于PC中的右键弹出菜单效果
  • Android仿QQ滑动弹出菜单标记已读、未读消息
  • 简单实现Android弹出菜单效果

标签：河南 新疆 沈阳 上海 沧州 乐山 红河 长治

巨人网络通讯声明：本文标题《编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu》，本文关键词  ；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。
  • 相关文章
  • 推荐文章

    上一篇：制作WEB在线编辑器-插入HTML标签

    下一篇：DIV+CSS 滑动门技术的简单例子

     
    微信咨询办理
    在线QQ客服
    ( 客服小王 )
    ( 客服小李 )
    ( 客服小刘 )
    ( 客服小张 )
    关于我们 | 荣誉资质 | 呼叫中心 | 代理加盟 | 客户案例 | 服务支持 | 产品介绍 | 行业资讯

    Copyright © 1999-2012 诚信 合法 规范的巨人网络 www.1330.cn 始建于2005年

    全国网站建设网站开发咨询热线：400-1100-266   0514-86177077

    江苏扬州巨人网络科技有限公司   总部地址：江苏省扬州信息产业基地11号楼4层

    《增值电信业务经营许可证》苏B2-20120278    苏ICP备15040257号 网站地图
    全国咨询热线
    400-1100-266
    在线客服( QQ：340506921 )
    版权所有：巨人网络(扬州)科技有限公司——拥有网站建设十年经验，具备独立网站开发能力，能够提供完善的网站设计及相关的网站制作服务！     全国统一服务热线：400-1100-266
    收缩
    • 微信客服
    • 微信二维码

    • 电话咨询

    • 400-1100-266