稀．html & css

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

CC2 則迴響

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

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

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

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

 

以下是自已做的範例：

image

最上方宣告
第一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

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

<style type="text/css">
<!–
…
–>
</style> 之間

/*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> 之間

    <ol id="menu01">
      <li class="submenu"><a href="index.html">主連結1</a>
           <ul>
            <li><a href="" target="_self">內容1</a></li>
            <li><a href="" target="_self">內容2</a></li>
            <li><a href="" target="_self">內容3</a></li>
            </ul>
      </li>
      <li class="submenu"><a href="#">主連結2</a>
            <ul>
            <li><a href="" target="_self">內容1</a></li>
            <li><a href="" target="_self">內容2</a></li>
            <li><a href="" target="_self">內容3</a></li>
            </ul>
      </li>
      <li class="submenu"><a href="#">主連結3</a>
            <ul>
            <li><a href="" target="_self">內容1</a></li>
            <li><a href="" target="_self">內容2</a></li>
            <li><a href="" target="_self">內容3</a></li>
            </ul>
      </li>       
      <li class="submenu"><a href="#">主連結4</a>
            <ul>
            <li><a href="" target="_self">內容1</a></li>
            <li><a href="" target="_self">內容2</a></li>
            <li><a href="" target="_self">內容3</a></li>
            </ul>
      </li>
      <li class="submenu"><a href="#">主連結5</a>
      </li>
    </ol>

 

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

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

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

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

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

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

 

網頁讀取方面：

<!–[if (IE 7)|(IE 6)]> 內容 <![endif]–>

ie6及ie7會特別讀取這個宣告，這樣才能在css及網頁上做ie6及ie7的修正哦!!

 

其它部分，都在css上面加註解了，加油!!

 

參考資料：

對「[css]簡易css水平下拉式選單製作」的想法

給予回應