婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > 編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu

編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu
熱門標簽：荒野大鏢客2地圖標注怎么變中文 中國地圖標注各省份 上古卷軸5地圖標注mod 移動400辦理電話 北川縣地圖標注 沈陽智能外呼系統(tǒng)排名 蘇州通信外呼系統(tǒng)多少錢 武漢人工外呼系統(tǒng) 山西旅游景地圖標注

編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu


摘要: 
本文介紹了使用 CSS 編寫適用于 Opera, Firefox, IE 的多風(fēng)格彈出菜單

說明:
編寫 CSS 彈出菜單的要點不外乎當(dāng)鼠標移到目標上時, 顯示出隱藏的標簽. 
要隱藏的標簽使用 display:none; 屬性進行隱藏. 
觸發(fā)顯示隱藏標簽主要使用 :hover 屬性, 并用 display:block; 顯示隱藏的標簽.

但由于瀏覽器對 CSS 的支持并非一致.
對于 Opera 或者 Firefox, 我們可以編寫出純 CSS 菜單, 他們支持任何標簽的 :hover 屬性.
而對于 IE 瀏覽器, :hover 只對 a 標簽起作用, 但我們可以使用腳本的 onmouseover, onmouseout 模擬出其他標簽的 :hover 屬性.
因此編寫適用于 IE 的 CSS 彈出菜單必須使用到少許的腳本.

目錄:
1. 編寫直排右側(cè)彈出的 CSS 菜單. 
1.1 真正的基于 Opera, Firefox 純 CSS 彈出菜單
1.2 兼容 IE, Opera, Firefox 的 CSS 彈出菜單(腳本實現(xiàn))

2. 編寫橫排底部彈出的 CSS 菜單. 
2.1 真正的基于 Opera, Firefox 純 CSS 彈出菜單
2.2 兼容 IE, Opera, Firefox 的 CSS 彈出菜單(腳本實現(xiàn))

3. 結(jié)論

4. 預(yù)覽

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

1. 編寫直排右側(cè)彈出的 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; /* 文字內(nèi)補丁間隔 */
  19.         margin:0px 0px 1px 0px; /* 菜單外補丁間隔 */
  20.     }
  21.     .pmVerticalRightOut .level:hover { /* 當(dāng)鼠標劃過一級菜單時 */
  22.         background-color:#6633FF; /* 背景色 */
  23.         color:#FFFFFF; /* 文字顏色 */
  24.     }
  25.     .pmVerticalRightOut .level_{display:none; /* 默認隱藏二級類別 */}
  26.     
  27.     .pmVerticalRightOut .level:hover .level_ { /* 鼠標劃過時觸發(fā)顯示二級類別 */
  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; /* 內(nèi)補丁間隔 */
  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 彈出菜單(腳本實現(xiàn))
    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; /* 文字內(nèi)補丁間隔 */
  20.         margin:0px 0px 1px 0px; /* 菜單外補丁間隔 */
  21.     }
  22.     .pmVerticalRightOut .level:hover { /* 當(dāng)鼠標劃過一級菜單時 */
  23.         background-color:#6633FF; /* 背景色 */
  24.         color:#FFFFFF; /* 文字顏色 */
  25.     }
  26.     .pmVerticalRightOut .level_{display:none; /* 默認隱藏二級類別 */}
  27.     
  28.     .pmVerticalRightOut .level:hover .level_ { /* 鼠標劃過時觸發(fā)顯示二級類別 */
  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; /* 內(nèi)補丁間隔 */
  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; /* 文字內(nèi)補丁間隔 */
  64.         margin:0px 0px 1px 0px; /* 菜單外補丁間隔 */
  65.     }
  66.     .levelIe .level_ { /* 鼠標劃過時觸發(fā)顯示二級類別 */
  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; /* 內(nèi)補丁間隔 */
  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; /* 文字內(nèi)補丁間隔 */
  19.         margin:0px 1px 0px 0px; /* 菜單外補丁間隔 */
  20.         float:left;
  21.     }
  22.     .pmHorizontalBottomOut .level:hover { /* 當(dāng)鼠標劃過一級菜單時 */
  23.         background-color:#6633FF; /* 背景色 */
  24.         color:#FFFFFF; /* 文字顏色 */
  25.     }
  26.     .pmHorizontalBottomOut .level_{display:none; /* 默認隱藏二級類別 */}
  27.     
  28.     .pmHorizontalBottomOut .level:hover .level_ { /* 鼠標劃過時觸發(fā)顯示二級類別 */
  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; /* 內(nèi)補丁間隔 */
  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 彈出菜單(腳本實現(xiàn))
    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; /* 文字內(nèi)補丁間隔 */
  20.         margin:0px 1px 0px 0px; /* 菜單外補丁間隔 */
  21.         float:left;
  22.     }
  23.     .pmHorizontalBottomOut .level:hover { /* 當(dāng)鼠標劃過一級菜單時 */
  24.         background-color:#6633FF; /* 背景色 */
  25.         color:#FFFFFF; /* 文字顏色 */
  26.     }
  27.     .pmHorizontalBottomOut .level_{display:none; /* 默認隱藏二級類別 */}
  28.     
  29.     .pmHorizontalBottomOut .level:hover .level_ { /* 鼠標劃過時觸發(fā)顯示二級類別 */
  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; /* 內(nèi)補丁間隔 */
  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; /* 文字內(nèi)補丁間隔 */
  64.         margin:0px 1px 0px 0px; /* 菜單外補丁間隔 */
  65.         float:left;
  66.     }
  67.     .levelIe { /* 當(dāng)鼠標劃過一級菜單時 */
  68.         background-color:#6633FF; /* 背景色 */
  69.         color:#FFFFFF; /* 文字顏色 */
  70.     }
  71.     .levelIe .level_ { /* 鼠標劃過時觸發(fā)顯示二級類別 */
  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; /* 內(nèi)補丁間隔 */
  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. 結(jié)論
以上例子可以看出, 如果已經(jīng)編寫出一個可用的CSS彈出菜單例子, 那要編寫出彈出位置在其他地方的 CSS 彈出菜單的話, 只須小小修改一下就 OK. 

4. 預(yù)覽

4.1 1.2 兼容 IE, Opera, Firefox 的 CSS 彈出菜單(腳本實現(xiàn)) 的預(yù)覽
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 彈出菜單(腳本實現(xiàn)) 的預(yù)覽
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實現(xiàn)左側(cè)彈出菜單層及PopupWindow主要方法介紹
  • Android之用PopupWindow實現(xiàn)彈出菜單的方法詳解
  • Android ListView長按彈出菜單二種實現(xiàn)方式示例
  • Android實現(xiàn)類似于PC中的右鍵彈出菜單效果
  • Android仿QQ滑動彈出菜單標記已讀、未讀消息
  • 簡單實現(xiàn)Android彈出菜單效果

標簽：遼源 陽泉 邯鄲 南充 喀什 東莞 海東 濱州

巨人網(wǎng)絡(luò)通訊聲明：本文標題《編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu》，本文關(guān)鍵詞  編寫,純,CSS,彈出,菜單,的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu》相關(guān)的同類信息！
  • 本頁收集關(guān)于編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    不卡视频在线观看| 99久久精品免费看| 国产精品国产三级国产aⅴ中文| 欧美唯美清纯偷拍| 国产精品18久久久久久久网站| 亚洲永久免费视频| 2023国产精华国产精品| 欧美日韩亚洲综合在线 欧美亚洲特黄一级| 国产精品夜夜嗨| 蜜桃av一区二区| 亚洲国产人成综合网站| 国产精品久久久久永久免费观看| 91精品中文字幕一区二区三区| 91亚洲午夜精品久久久久久| 国产一区二区福利视频| 免费人成精品欧美精品| 亚洲自拍偷拍综合| 中文字幕一区二区三区色视频| 久久嫩草精品久久久精品一| 69堂成人精品免费视频| 欧美吞精做爰啪啪高潮| gogogo免费视频观看亚洲一| 国产成人精品三级麻豆| 国产精品一区在线| 国内外成人在线| 蜜桃一区二区三区在线观看| 亚洲综合小说图片| 怡红院av一区二区三区| 亚洲欧美日本在线| 中文字幕欧美一| 国产精品灌醉下药二区| www国产亚洲精品久久麻豆| 日韩欧美电影一二三| 欧美一区二区黄| 3d成人h动漫网站入口| 69av一区二区三区| 日韩欧美中文字幕一区| 日韩免费福利电影在线观看| 欧美tickling挠脚心丨vk| 91精品国产综合久久香蕉的特点 | 欧美成人综合网站| 欧美一区二区三区视频在线观看| 欧美男女性生活在线直播观看| 欧美日韩成人综合天天影院| 欧美浪妇xxxx高跟鞋交| 日韩一区二区三| 精品国产一二三| 久久精品一区二区| 最好看的中文字幕久久| 一区二区欧美视频| 五月激情六月综合| 久久99久久久久久久久久久| 韩国视频一区二区| 国产91综合一区在线观看| jlzzjlzz亚洲日本少妇| 欧洲一区二区av| 欧美一区二区三区成人| 2022国产精品视频| 亚洲天堂精品在线观看| 亚洲香肠在线观看| 裸体健美xxxx欧美裸体表演| 国产成人日日夜夜| 色综合久久久久综合体桃花网| 欧美视频在线一区二区三区 | 亚洲国产精品视频| 五月婷婷激情综合网| 精品在线播放免费| 不卡av免费在线观看| 欧美日韩高清一区二区三区| 精品国产乱码久久久久久牛牛| 国产精品欧美一级免费| 一区二区三区精品在线观看| 日韩激情视频在线观看| 国产美女娇喘av呻吟久久| 91久久一区二区| 精品盗摄一区二区三区| 国产精品视频一二三| 亚洲高清三级视频| 狠狠网亚洲精品| 欧美在线播放高清精品| 久久亚洲综合色| 亚洲自拍偷拍麻豆| 粉嫩在线一区二区三区视频| 欧美日韩成人综合| 国产精品看片你懂得| 热久久久久久久| 91丨九色丨黑人外教| 欧美变态tickling挠脚心| 亚洲精品中文在线观看| 国产一区二区三区av电影| 欧美日韩亚洲国产综合| 中文字幕不卡三区| 麻豆精品一二三| 91久久一区二区| 中文字幕一区二区三区在线观看 | 日本午夜精品一区二区三区电影| 成人免费看片app下载| 日韩欧美电影在线| 亚洲成国产人片在线观看| 99久久免费精品| 久久亚洲捆绑美女| 日本系列欧美系列| 欧美日韩一区精品| 亚洲免费在线视频一区 二区| 国产精品主播直播| 日韩一区二区麻豆国产| 午夜欧美在线一二页| 91在线无精精品入口| 国产欧美一区二区精品性色| 免费成人在线影院| 欧美顶级少妇做爰| 亚洲一区二区三区影院| 91在线看国产| 国产精品萝li| 成人va在线观看| 国产亚洲欧美一级| 国产一区二区三区国产| 精品人伦一区二区色婷婷| 日韩精品福利网| 欧美高清激情brazzers| 五月婷婷综合网| 欧美一区永久视频免费观看| 视频一区视频二区中文字幕| 欧美日韩一区二区不卡| 亚洲国产精品一区二区久久恐怖片| 一本色道亚洲精品aⅴ| 亚洲人成网站精品片在线观看| 99久久综合狠狠综合久久| 中文字幕精品一区二区精品绿巨人 | 欧美日韩国产bt| 日韩精品视频网| 日韩一区二区在线看| 免费高清成人在线| 精品久久久久久久久久久久久久久| 免费人成在线不卡| 久久综合给合久久狠狠狠97色69| 免费在线视频一区| 精品免费日韩av| 国产经典欧美精品| 国产精品你懂的| 在线视频你懂得一区| 午夜一区二区三区在线观看| 欧美日本高清视频在线观看| 视频在线观看91| 久久这里只有精品视频网| 国产东北露脸精品视频| 国产精品美女久久福利网站| 91丝袜美腿高跟国产极品老师 | 色av成人天堂桃色av| 亚洲综合视频网| 7777精品伊人久久久大香线蕉完整版| 男人操女人的视频在线观看欧美| 久久综合色综合88| 成人激情av网| 亚洲在线视频网站| 欧美一级专区免费大片| 国产精品系列在线观看| 亚洲三级电影网站| 欧美高清视频www夜色资源网| 精品一区二区三区不卡| 国产精品久久久一本精品| 欧美日韩亚洲综合在线| 国产一区在线看| 国产精品的网站| 欧美理论在线播放| 国产精品亚洲人在线观看| 亚洲黄色免费网站| 欧美成人一区二区三区 | 欧美成人欧美edvon| 成人黄色电影在线| 亚洲电影欧美电影有声小说| 2024国产精品视频| 91成人在线免费观看| 韩国一区二区视频| 亚洲一区二区三区四区在线 | 国产精品的网站| 欧美一级二级三级蜜桃| 国产精品一区2区| 亚洲乱码国产乱码精品精小说 | 不卡视频在线看| 麻豆成人av在线| 综合久久一区二区三区| 精品日韩在线一区| 色婷婷综合视频在线观看| 激情综合色丁香一区二区| 一区二区三区 在线观看视频| 久久精品日韩一区二区三区| 欧美三级乱人伦电影| 成人一区二区在线观看| 日本午夜一区二区| 一区二区三区中文在线| 久久久精品tv| 91精品久久久久久久91蜜桃| 成人动漫一区二区| 国产一区二区成人久久免费影院 | 国产一区啦啦啦在线观看| 亚洲成av人片| 亚洲日本护士毛茸茸| 国产欧美一二三区| 精品国产麻豆免费人成网站|