• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    编写纯 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弹出菜单效果
    上一篇：制作WEB在线编辑器-插入HTML标签
    下一篇：DIV+CSS 滑动门技术的简单例子
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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