2.jpg

如何不使用任何JavaScript或jQuery,僅使用純CSS語法

來達到二階層、三階層的下拉選單按鈕?

應該不少網頁設計師會遇到這樣的瓶頸,然而,我自己也遇到這樣的瓶頸

花了不少時間Google找了資料,但能完美跨瀏覽器,卻又是另外一個瓶頸

今天來分享一個 目前為止 我找到最好的語法

1. 首先,你要先使用ul及li來建立以下階層的按鈕內容,如下圖

3.gif  

HTML CODE :

<div id="menu">
  <ul>
    <li> <a href="#">Fruits</a>
      <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Banana</a></li>
        <li><a href="#">Cherry</a></li>
        <li><a href="#">Orange</a></li>
      </ul>
    </li>
    <li> <a href="#">Vegetables</a>
      <ul>
        <li><a href="#Broccoli">Broccoli</a></li>
        <li><a href="#Cabbage">Cabbage</a></li>
        <li><a href="#Peas">Peas</a></li>
        <li><a href="#Onion">Onion</a></li>
      </ul>
    </li>
    <li> <a href="#Meats">Meats</a>
      <ul>
        <li> <a href="#White_Meat">White Meat</a>
          <ul>
            <li><a href="#Chicken">Chicken</a></li>
            <li><a href="#Duck">Duck</a></li>
            <li><a href="#Fish">Fish</a></li>
          </ul>
        </li>
        <li> <a href="#Red_Meat">Red Meat</a>
          <ul>
            <li><a href="#Beef">Beef</a></li>
            <li><a href="#Pork">Pork</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

最後,再加上以下的CSS語法,即可達到二階層、三階層的下拉菜單按鈕了

CSS CODE :

/* 加載csshover3.htc,解決IE6沒有li:hover擬類的問題 */
* html body {
	behavior:url("csshover3.htc");
}
/* ---------- 大小與定位 ---------- */
#menu {
	/* 選單大小 */
	width:600px;
	height:30px;
}
#menu ul {
	/* 取消ul樣式符號 */
	list-style-type:none;
	/* 重設ul邊界與留白為零 */
	margin:0;
	padding:0;
	/* 內有浮動元件時,需設overflow才會自動調整大小 */
	overflow:auto;
}
* html #menu ul {
	/* 解決IE6不理overflow問題,直接指定高度 */
	height:30px;
}
#menu ul li {
	/* 利用float讓第一層li水平排列 */
	float:left;
}
/* 解決IE6條列式餘白問題*/
* html #menu ul li {
	display:inline;
}
#menu ul li a {
	/* 將a改為區塊元件,以便指定寬高 */
	display:block;
	/* 這邊也要設float,否則IE6會以100%寬度顯示 */
	float:left;
	/* 固定高度 */
	height:30px;
	width: 100px;
	text-align: center;
}
#menu ul li ul {
	/* 讓第二層ul跳脫文件流以利定位 */
	position:absolute;
	/* 固定寬度 */
	width:100px;
	/* 避免出現捲軸 */
	overflow:visible;
	/* 讓ul與母階層li相同位置 */
	clear:left;
	margin-top: 30px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
/* 修正IE7絕對定位差異 */
*:first-child+html #menu ul li ul {
	margin-top:0;
}
/* 修正IE6絕對定位差異 */
* html #menu ul li ul {
	margin-top:0;
}
#menu ul li ul li {
	/* 覆寫繼承自第一層的浮動設定 */
	float:none;
	text-align: center;
}
#menu ul li ul li a {
	/* 覆寫繼承自第一層的浮動設定 */
	float:none;
	width: 100%;/* 註:display、height、padding繼承第一層的設定 */
}
#menu ul li ul li ul {
	margin-top: -30px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 100px;
	width: 100%;
}
/* 修正IE7絕對定位差異 */
*:first-child+html #menu ul li ul li ul {
	margin-top:-30px;
}
#menu ul li ul li ul li {
/* width、float繼承第二層,免設定 */
}
#menu ul li ul li ul li a {
/* width、float繼承第二層,免設定 */
}
/* ---------- 隱藏與顯示階層 ---------- */
#menu ul li ul {
	/* 預先隱藏第二層 */
	visibility:hidden;
}
#menu ul li:hover ul {
	/* 觸動第一層時,顯示第二層 */
	visibility:visible;
}
#menu ul li:hover ul li ul {
	/* 顯示第二層時,隱藏第三層,避免同時彈出 */
	visibility:hidden;
}
#menu ul li ul li:hover ul {
	/* 觸動第二層時,顯示第三層 */
	visibility:visible;
}
#menu ul li ul li:hover ul li ul {
	/* 顯示第三層時,隱藏第四層,避免同時彈出 */
	visibility:hidden;
}
#menu ul li ul li ul li:hover ul {
	/* 觸動第三層時,顯示第四層 */
	visibility:visible;
}
/* ---------- 以下為美化用,非必需 ---------- */


/* 預設字體 */
#menu {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
/* 第一層ul背景色彩與邊框 */
#menu ul {
	background:#6f6f6f;
}
/* 第一層a字型 */
#menu ul li a {
	color:#FFF;
	text-decoration:none;
	line-height: 30px;
}
/*第二層ul背景色彩與邊框  */
#menu ul li ul {
	background:#efefef;
}
/* 第二層a字型 */
#menu ul li ul li a {
	font-size:12px;
	color:#333333;
	text-decoration:none;
}
/* 觸動第一層li時,改變背景色 */
#menu ul li:hover, #menu ul li a:hover {
	background:#efefef;
}
#menu ul li:hover a {
	color:#333333;
}
/* 觸動第二層以上li時改變背景色 */
#menu ul li ul li:hover, #menu ul li ul li a:hover {
	background:#dfdfdf;
}

其中特別注意必須加載 "csshover3.htc" 這補丁

這是用來解決IE6沒有li:hover擬類的問題

搞定,收工!

創作者介紹
創作者 英傑銳數位設計 的頭像
英傑銳數位設計

英傑銳網路數位設計

英傑銳數位設計 發表在 痞客邦 留言(12) 人氣()


留言列表 (12)

發表留言
  • 訪客
  • 你好,謝謝你的分享^^
    我最近也是被IE的下拉顯示弄得有點狼狽
  • 憨死
  • 感謝分享,這風格很好看 =)
  • mo
  • 請教一下,我要讓三層的選單底色顏色都不一樣,要怎麼修改呢?
    謝謝你了,可以的話 msn 或 EMAIL給我, mo13145msn .com
    非常感謝你~
  • Jerry's 網頁設計
  • CSS的部分新增以下:

    /*以下開始為第三層不一樣的顏色*/
    #menu ul li ul li ul {
    background-color: #6C0;
    }
    #menu ul li ul li ul li a {
    color: #060;
    font-size: 12px;
    text-decoration: none;
    }
    #menu ul li ul li ul li:hover, #menu ul li ul li ul li a:hover {
    background-color: #060;
    color: #FFF;
    }
  • 每天努力一小時!
  • 好不容易找到您的網頁,看完之後真的很感謝您的分享,受用不少,覺得您好偉大!
    想請教一下:決定選單水平跟垂直 的設定點在哪呢 ??
    要如何使水平的選單改成垂直的呢?
    非常感謝您~
  • jasoncschen
  • 我是這套CSS的原作者,提醒您轉貼註明出處是網路基本禮儀
  • 訪問者
  • 作者您好:
    請要如何將整個選單水平置中,
    把整個選單放在畫面的水平居中位置呢?
    感謝教學><
  • 每天努力一小時!
  • to樓上:
    設定選單的寬度,有可能是ul也有可能是div
    然後在被設定一定寬度的該物件再加上:margin:0 auto;
    即可
  • 訪問者
  • TO 樓上好心人的解答:
    了解!我再去嘗試修改一下!感謝解答!
  • 訪客
  • 非常感謝您的分享, 非常實用, 想請問一下, 第一層選單, 我想要每個列表項目的顏色不一樣,該怎麼改呢?
  • 可以使用:nth-child(n)偽類別來解決

    英傑銳數位設計 於 2018/09/15 16:09 回覆

  • 小椿
  • <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>UNE DILETTANTE</title>
    <style>

    body {
    background-color:#000;
    cursor: crosshair;}/*全域型設定*/

    a:hover {cursor:crosshair;}/*超連結,當滑鼠移上去*/

    #head {
    background-image:url(img/index/index-bg.gif);
    background-attachment:fixed;
    background-position:center;
    background-repeat:repeat;
    box-shadow:0 0 25px 15px rgba(0,0,0,100), inset 0 0 25px 25px rgba(0,0,0,100);
    width:100%;
    height:50%;
    margin-top:1%;}

    #side { /*旁邊*/
    background-color:#000;
    color:#FFF;
    float:left;}


    ul {
    margin: 50px;
    padding: 0 50px;
    list-style-type: none;
    overflow:auto;}

    ul.drop-down-menu {
    border: 0px;
    display: inline-block;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 0px;}

    ul.drop-down-menu li {
    position: relative;
    white-space: nowrap;
    border-right: 0px;}

    ul.drop-down-menu > li:last-child {
    border-right: none;}

    ul.drop-down-menu > li {
    float: left;}

    ul.drop-down-menu a {
    background-image:url(img/index/index-bg.gif);
    padding: 0 50px;
    text-decoration: none;}

    ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/}

    ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/}


    ul.drop-down-menu ul { /*隱藏次選單*/
    display: none;}

    ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
    display: inline;}

    </style>

    <script src="js/menu.js" type="text/javascript">
    </script>

    <!--這是body標籤--><body onLoad="MM_preloadImages('img/index/00-about2.png','img/index/00-material2.png','img/index/00-gallery2.png','img/index/00-novel2.png','img/index/00-poems2.png')">
    <!--這是尾巴-->

    <div id="head"><!--這是上方橫幅-->

    <ul class="drop-down-menu">

    <!--這是Material--><li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('material','','img/index/00-material2.png',1)"><img src="img/index/00-material.png" alt="+Dilettante+" width="120" height="30" id="material"></a>
    <ul>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('material_list1','','img/index/lib1-2.gif',1)"><img src="img/index/lib1-1.gif" alt="+Material+" width="190" height="50" id="material_list1"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('material_list2','','img/index/lib2-2.gif',1)"><img src="img/index/lib2-1.gif" alt="+Material+" width="190" height="50" id="material_list2"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('material_list3','','img/index/lib3-2.gif',1)"><img src="img/index/lib3-1.gif" alt="+Material+" width="190" height="50" id="material_list3"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('material_list4','','img/index/lib4-2.gif',1)"><img src="img/index/lib4-1.gif" alt="+Material+" width="190" height="50" id="material_list4"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('material_list5','','img/index/lib5-2.gif',1)"><img src="img/index/lib5-1.gif" alt="+Material+" width="190" height="50" id="material_list5"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('material_list6','','img/index/lib6-2.gif',1)"><img src="img/index/lib6-1.gif" alt="+Material+" width="190" height="50" id="material_list6"></a></li>
    </ul>
    <!--這是Material--></li>

    <!--這是Gallery--><li><a href="#"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery','','img/index/00-gallery2.png',1)"><img src="img/index/00-gallery.png" alt="+Dilettante+" width="120" height="30" id="gallery"></a>
    <ul>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery_list1','','img/index/lib1-2.gif',1)"><img src="img/index/lib1-1.gif" alt="+Gallery+" width="190" height="50" id="gallery_list1"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery_list2','','img/index/lib2-2.gif',1)"><img src="img/index/lib2-1.gif" alt="+Gallery+" width="190" height="50" id="gallery_list2"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery_list3','','img/index/lib3-2.gif',1)"><img src="img/index/lib3-1.gif" alt="+Gallery+" width="190" height="50" id="gallery_list3"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery_list4','','img/index/lib4-2.gif',1)"><img src="img/index/lib4-1.gif" alt="+Gallery+" width="190" height="50" id="gallery_list4"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery_list5','','img/index/lib5-2.gif',1)"><img src="img/index/lib5-1.gif" alt="+Gallery+" width="190" height="50" id="gallery_list5"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery_list6','','img/index/lib6-2.gif',1)"><img src="img/index/lib6-1.gif" alt="+Gallery+" width="190" height="50" id="gallery_list6"></a></li>
    </ul>
    <!--這是Gallery--></li>

    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('novel','','img/index/00-novel2.png',1)"><img src="img/index/00-novel.png" alt="+Dilettante+" width="120" height="30" id="novel"></a>
    <ul>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('novel_list1','','img/index/lib1-2.gif',1)"><img src="img/index/lib1-1.gif" alt="+Novel+" width="190" height="50" id="novel_list1"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('novel_list2','','img/index/lib2-2.gif',1)"><img src="img/index/lib2-1.gif" alt="+Novel+" width="190" height="50" id="novel_list2"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('novel_list3','','img/index/lib3-2.gif',1)"><img src="img/index/lib3-1.gif" alt="+Novel+" width="190" height="50" id="novel_list3"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('novel_list4','','img/index/lib4-2.gif',1)"><img src="img/index/lib4-1.gif" alt="+Novel+" width="190" height="50" id="novel_list4"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('novel_list5','','img/index/lib5-2.gif',1)"><img src="img/index/lib5-1.gif" alt="+Novel+" width="190" height="50" id="novel_list5"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('novel_list6','','img/index/lib6-2.gif',1)"><img src="img/index/lib6-1.gif" alt="+Novel+" width="190" height="50" id="novel_list6"></a></li>
    </ul>
    </li>

    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('poem','','img/index/00-poems2.png',1)"><img src="img/index/00-poems.png" alt="+Dilettante+" width="120" height="30" id="poem"></a>
    <ul>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('poem_list1','','img/index/lib1-2.gif',1)"><img src="img/index/lib1-1.gif" alt="+Poem+" width="190" height="50" id="poem_list1"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('poem_list2','','img/index/lib2-2.gif',1)"><img src="img/index/lib2-1.gif" alt="+Poem+" width="190" height="50" id="poem_list2"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('poem_list3','','img/index/lib3-2.gif',1)"><img src="img/index/lib3-1.gif" alt="+Poem+" width="190" height="50" id="poem_list3"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('poem_list4','','img/index/lib4-2.gif',1)"><img src="img/index/lib4-1.gif" alt="+Poem+" width="190" height="50" id="poem_list4"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('poem_list5','','img/index/lib5-2.gif',1)"><img src="img/index/lib5-1.gif" alt="+Poem+" width="190" height="50" id="poem_list5"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('poem_list6','','img/index/lib6-2.gif',1)"><img src="img/index/lib6-1.gif" alt="+Poem+" width="190" height="50" id="poem_list6"></a></li>
    </ul>
    </li>

    </ul>




    </div><!--這是上方橫幅-->
    <div id="side"><!--這旁邊-->
    </div><!--這是旁邊-->
    </body>
    </html>

    請問到底是怎麼回事?QAQ
    我的一直有浮動歪來歪去的問題
  • 哈囉,方便提供線上直接瀏覽的路徑嗎?

    英傑銳數位設計 於 2018/10/09 09:57 回覆

  • 小椿
  • 我解決了XDD
    我把
    display: none
    display: inline
    改成visible hidden這個選項
    就不會亂飄了