[css]簡易css水平下拉式選單製作

這幾天特別研究一下 css下拉式選單

當然…他也是有ie6 ie7的問題，

因為css在ie6與ie7是不會讀取 XX:hover 的標籤，ie6與ie7只能讀取a:hover的標籤 (這個是上網查的)…

所以必須要有方法能讓他讀取 XX:hover 的標籤 = =”

以下是自已做的範例：

最上方宣告
第一行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

css選單程式
可以外部呼叫或放在

/*menu01選單連結的顏色及去底線*/
#menu01 a {
text-decoration: none;
color: #CCCCCC;
}

/*menu01選單整體寬高及顏色置中設定*/
#menu01 {
    width: 770px;
    height: 30px;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    background: #4E4E4E;
}

/*讓menu01選單的標頭都隱藏起來*/
#menu01 ol, li, ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/*調整整個選單各主標題連結*/
#menu01 li.submenu {
    float: left;            /*讓主標題連結變成水平狀*/
    padding: 0;
    margin: 0;
    width: 154px;           /*各主標題連結的寬度*/
    height: 30px;           /*各主標題連結的高度*/
    text-align: center;
}

/*調整子選單的寬度和高度*/
#menu01 li {
    padding: 10px;
    width: 80px;     /*各子選單連結的寬度*/
    height: 20px;     /*各子選單連結的高度*/
    text-align: left;
}

/*ie8 ff 調整子選單的相對位置*/
#menu01 li ul {
    display: none;          /*展現方式為隱藏*/
    position: absolute;      /*子選單的對齊方法為絕對方式*/
    z-index: 999;            /*子選單的圖層層級為999，在最上方*/
    background: #000;
    margin-top: 5px;         /*子選單區塊與主連結的相對往下移點數*/
    margin-left: 40px;       /*子選單區塊與主連結的相對往右移點數*/
}

/*顯示子選單區塊*/
#menu01 li:hover ul { /*當滑鼠移到li時，ul會*/
display: block; /*ul會顯示出來，即子選單區塊顯示出來*/
}

/*調整滑鼠移到主選單的項目時會變什麼顏色*/
#menu01 li:hover {          /*當滑鼠移到li時*/
    background-color: red;
    color: white;
}

/*調整滑鼠移到子選單的項目時會變什麼顏色*/
#menu01 li li:hover {          /*當滑鼠移到li裡的li時*/
    background-color: blue;
    color: white;
}

css for ie6 及 ie7
放在<head> … </head>之間

<!–[if (IE 7)|(IE 6)]>
<style type="text/css">
<!–
/*ie6 :hover hack ，讓ie6可以讀取 li:hover 這個css指令，必須要把網頁上傳後瀏覽才有效*/
/*ie6 :hover hack下載： http://www.xs4all.nl/~peterned/htc/csshover3.htc */
body { behavior: url("csshover3.htc"); }

/*修正ie6,ie7隱藏區塊的相對位置，與ie8 ff 標準不同*/
#menu01 li:hover ul {
margin-top: 25px; /*子選單區塊與主連結的相對往下移點數*/
margin-left: -60px; /*子選單區塊與主連結的相對往右移點數*/
}
–>
</style>
<![endif]–>

html程式碼
放在<body> … </body> 之間

這回css選單的重點在於ie6 :hover hack

csshover3htc 此檔案要寫在以下的位置上：

body { behavior: url("csshover3.htc"); }

請把csshover3.htc 放在讀取網頁的同一個資料夾唷!

實測時記得必須要把網頁上傳後瀏覽才有效哦!!

ie6 :hover hack下載網址： http://www.xs4all.nl/~peterned/htc/csshover3.htc

網頁讀取方面：