純CSS二層以上選單 – 原意筆記本

整理出純 CSS 二層以上選單

deom-01

csshover3.htc 解決IE6沒有li:hover擬類的問題

<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>

<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="#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>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</div>

/* 加載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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

/* 加載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;

}

See the Pen 純CSS二、三階層動態選單按鈕 (完美支援各版本瀏覽器) by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

deom-02

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>如何利用 CSS 製作多級選單</title>
</head>
<body>
<nav>
		<ul>
			<li><a href="http://www.apple.com/" target="_blank">Home</a></li>
			<li><a href="http://store.apple.com/" target="_blank">Store</a></li>
			<li>
				<a href="http://www.apple.com/mac/" target="_blank">Mac</a>
				<ul>
					<li>
						<a href="http://www.apple.com/mac/" target="_blank">Mac</a>
						<ul>
							<li><a href="http://www.apple.com/macbookair/" target="_blank">MacBook Air</a></li>
							<li><a href="http://www.apple.com/macbookpro/" target="_blank">MacBook Pro</a></li>
							<li><a href="http://www.apple.com/macmini/" target="_blank">Mac mini</a></li>
							<li><a href="http://www.apple.com/imac/" target="_blank">iMac</a></li>
							<li><a href="http://www.apple.com/macpro/" target="_blank">Mac Pro</a></li>
							<li><a href="http://www.apple.com/macosx/" target="_blank">OS X Lion</a></li>
						</ul>
					</li>
					<li>
						<a href="http://www.apple.com/mac/" target="_blank">Applications</a>
						<ul>
							<li><a href="http://www.apple.com/ilife/" target="_blank">iLife</a></li>
							<li><a href="http://www.apple.com/iwork/" target="_blank">iWork</a></li>
							<li><a href="http://www.apple.com/safari/" target="_blank">Safari</a></li>
							<li><a href="http://www.apple.com/aperture/" target="_blank">Aperture</a></li>
							<li><a href="http://www.apple.com/finalcutpro/" target="_blank">Final Cut Pro</a></li>
							<li><a href="http://www.apple.com/logicpro/" target="_blank">Logic Pro</a></li>
						</ul>
					</li>
					<li>
						<a href="http://www.apple.com/mac/" target="_blank">Accessories</a>
						<ul>
							<li><a href="http://www.apple.com/keyboard/" target="_blank">Apple Wireless Keyboard</a></li>
							<li><a href="http://www.apple.com/magicmouse/" target="_blank">Magic Mouse</a></li>
							<li><a href="http://www.apple.com/magictrackpad/" target="_blank">Magic Trackpad</a></li>
							<li><a href="http://www.apple.com/displays/" target="_blank">Apple Thunderbolt Display</a></li>
							<li><a href="http://www.apple.com/airportexpress/" target="_blank">Airport Express</a></li>
							<li><a href="http://www.apple.com/airportextreme/" target="_blank">Airport Extreme</a></li>
							<li><a href="http://www.apple.com/timecapsule/" target="_blank">Time Capsule</a></li>
						</ul>
					</li>
					<li>
						<a href="http://www.apple.com/mac/" target="_blank">Server</a>
						<ul>
							<li><a href="http://www.apple.com/macosx/server/" target="_blank">OS X Lion Server</a></li>
							<li><a href="http://www.apple.com/macpro/" target="_blank">Mac Pro with Lion Server</a></li>
							<li><a href="http://www.apple.com/remotedesktop/" target="_blank">Apple Remote Desktop</a></li>
							<li><a href="http://www.apple.com/macmini/server/" target="_blank">Mac mini with Lion Server</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="http://www.apple.com/ipod/" target="_blank">iPod</a>
				<ul>
					<li>
						<a href="http://www.apple.com/ipod/" target="_blank">Products</a>
						<ul>
							<li><a href="http://www.apple.com/ipodshuffle/" target="_blank">iPod shuffle</a></li>
							<li><a href="http://www.apple.com/ipodnano/" target="_blank">iPod nano</a></li>
							<li><a href="http://www.apple.com/ipodclassic/" target="_blank">iPod classic</a></li>
							<li>
								<a href="http://www.apple.com/ipodtouch/" target="_blank">iPod touch</a>
								<ul>
									<li><a href="http://www.apple.com/ipodtouch/features/" target="_blank">Features</a></li>
									<li><a href="http://www.apple.com/ipodtouch/built-in-apps/" target="_blank">Bulit-in Apps</a></li>
									<li><a href="http://www.apple.com/ipodtouch/from-the-app-store/" target="_blank">From the App Store</a></li>
									<li><a href="http://www.apple.com/ipodtouch/ios/" target="_blank">iOS</a></li>
									<li><a href="http://www.apple.com/ipodtouch/icloud/" target="_blank">iCloud</a></li>
									<li><a href="http://www.apple.com/ipodtouch/specs.html" target="_blank">Tech Specs</a></li>
								</ul>
							</li>
							<li><a href="http://www.apple.com/appletv/" target="_blank">Apple TV</a></li>
						</ul>
					</li>
					<li><a href="http://www.apple.com/ipod/accessories/" target="_blank">Accessories</a></li>
				</ul>
			</li>
			<li><a href="http://www.apple.com/iphone/" target="_blank">iPhone</a></li>
			<li><a href="http://www.apple.com/ipad/" target="_blank">iPad</a></li>
			<li><a href="http://www.apple.com/itunes/" target="_blank">iTunes</a></li>
			<li><a href="http://www.apple.com/support/" target="_blank">Support</a></li>
		</ul>
	</nav>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>如何利用 CSS 製作多級選單</title>

</head>

<body>

<nav>

<ul>

<li><a href="http://store.apple.com/" target="_blank">Store</a></li>

<li>

<ul>

<li>

<ul>

<li><a href="http://www.apple.com/macbookair/" target="_blank">MacBook Air</a></li>

<li><a href="http://www.apple.com/macbookpro/" target="_blank">MacBook Pro</a></li>

</ul>

</li>

<li>

<a href="http://www.apple.com/mac/" target="_blank">Applications</a>

<ul>

<li><a href="http://www.apple.com/ilife/" target="_blank">iLife</a></li>

<li><a href="http://www.apple.com/iwork/" target="_blank">iWork</a></li>

<li><a href="http://www.apple.com/safari/" target="_blank">Safari</a></li>

<li><a href="http://www.apple.com/aperture/" target="_blank">Aperture</a></li>

<li><a href="http://www.apple.com/finalcutpro/" target="_blank">Final Cut Pro</a></li>

<li><a href="http://www.apple.com/logicpro/" target="_blank">Logic Pro</a></li>

</ul>

</li>

<li>

<a href="http://www.apple.com/mac/" target="_blank">Accessories</a>

<ul>

<li><a href="http://www.apple.com/keyboard/" target="_blank">Apple Wireless Keyboard</a></li>

<li><a href="http://www.apple.com/magicmouse/" target="_blank">Magic Mouse</a></li>

<li><a href="http://www.apple.com/magictrackpad/" target="_blank">Magic Trackpad</a></li>

<li><a href="http://www.apple.com/displays/" target="_blank">Apple Thunderbolt Display</a></li>

<li><a href="http://www.apple.com/airportexpress/" target="_blank">Airport Express</a></li>

<li><a href="http://www.apple.com/airportextreme/" target="_blank">Airport Extreme</a></li>

<li><a href="http://www.apple.com/timecapsule/" target="_blank">Time Capsule</a></li>

</ul>

</li>

<li>

<a href="http://www.apple.com/mac/" target="_blank">Server</a>

<ul>

<li><a href="http://www.apple.com/macosx/server/" target="_blank">OS X Lion Server</a></li>

<li><a href="http://www.apple.com/macpro/" target="_blank">Mac Pro with Lion Server</a></li>

<li><a href="http://www.apple.com/remotedesktop/" target="_blank">Apple Remote Desktop</a></li>

<li><a href="http://www.apple.com/macmini/server/" target="_blank">Mac mini with Lion Server</a></li>

</ul>

</li>

</ul>

</li>

<li>

<ul>

<li>

<a href="http://www.apple.com/ipod/" target="_blank">Products</a>

<ul>

<li><a href="http://www.apple.com/ipodshuffle/" target="_blank">iPod shuffle</a></li>

<li><a href="http://www.apple.com/ipodclassic/" target="_blank">iPod classic</a></li>

<li>

<a href="http://www.apple.com/ipodtouch/" target="_blank">iPod touch</a>

<ul>

<li><a href="http://www.apple.com/ipodtouch/features/" target="_blank">Features</a></li>

<li><a href="http://www.apple.com/ipodtouch/built-in-apps/" target="_blank">Bulit-in Apps</a></li>

<li><a href="http://www.apple.com/ipodtouch/from-the-app-store/" target="_blank">From the App Store</a></li>

<li><a href="http://www.apple.com/ipodtouch/icloud/" target="_blank">iCloud</a></li>

<li><a href="http://www.apple.com/ipodtouch/specs.html" target="_blank">Tech Specs</a></li>

</ul>

</li>

<li><a href="http://www.apple.com/appletv/" target="_blank">Apple TV</a></li>

</ul>

</li>

<li><a href="http://www.apple.com/ipod/accessories/" target="_blank">Accessories</a></li>

</ul>

</li>

<li><a href="http://www.apple.com/iphone/" target="_blank">iPhone</a></li>

<li><a href="http://www.apple.com/itunes/" target="_blank">iTunes</a></li>

<li><a href="http://www.apple.com/support/" target="_blank">Support</a></li>

</ul>

</nav>

</body>

</html>

* {
  margin: 0;
  padding: 0;
}

body {
  font: 300 14px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  background: #f5f5f5;
}

ul {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap; /* 避免文字換行 */
}
ul li {
  position: relative; /* 使子選單依照母選單的座標顯示 */
}
/* 設定母選單的連結樣式 */
ul li a {
  text-decoration: none;
  color: #777;
  padding: 10px 20px;
  display: block;
  background: url(https://zespia.tw/demo/css-multi-level-menu/detail.png) bottom right no-repeat;
	/*引用原站的三角圖片*/
}
/* 當母選單下沒有子選單時，也就是說只有一個連結時，隱藏detail.png */
ul li a:only-child {
  background: none;
}
ul li:hover {
  background: #777;
}
ul li:hover > a {
  color: #fff;
}
ul li:hover > ul {
  display: block; /* 滑鼠滑入母選單後，顯示子選單 */
}
nav > ul > li {
  display: inline-block; /* 使一級選單排成一橫列 */
}
/* 二級選單顯示於一級選單的正下方 */
ul ul {
  position: absolute;
  top: 100%;
  list-style: none;
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  display: none;
}
/* 三級選單則顯示於二級選單的右方 */
ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

footer {
  color: #999;
  font-size: 12px;
  margin: 10px;
  text-align: right;
}
footer a {
  color: #666;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

* {

margin: 0;

padding: 0;

}

body {

font: 300 14px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;

background: #f5f5f5;

}

ul {

background: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

white-space: nowrap; /* 避免文字換行 */

}

ul li {

position: relative; /* 使子選單依照母選單的座標顯示 */

}

/* 設定母選單的連結樣式 */

ul li a {

text-decoration: none;

color: #777;

padding: 10px 20px;

display: block;

background: url(https://zespia.tw/demo/css-multi-level-menu/detail.png) bottom right no-repeat;

/*引用原站的三角圖片*/

}

/* 當母選單下沒有子選單時，也就是說只有一個連結時，隱藏detail.png */

ul li a:only-child {

background: none;

}

ul li:hover {

background: #777;

}

ul li:hover > a {

color: #fff;

}

ul li:hover > ul {

display: block; /* 滑鼠滑入母選單後，顯示子選單 */

}

nav > ul > li {

display: inline-block; /* 使一級選單排成一橫列 */

}

/* 二級選單顯示於一級選單的正下方 */

ul ul {

position: absolute;

top: 100%;

list-style: none;

background: #fff;

box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

display: none;

}

/* 三級選單則顯示於二級選單的右方 */

ul ul ul {

position: absolute;

left: 100%;

top: 0;

}

footer {

color: #999;

font-size: 12px;

margin: 10px;

text-align: right;

}

footer a {

color: #666;

text-decoration: none;

}

footer a:hover {

text-decoration: underline;

}

See the Pen 如何利用 CSS 製作多級選單 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

資料源：
[CSS教學] – 純CSS二、三階層動態選單按鈕 (完美支援各版本瀏覽器)
如何利用 CSS 製作多級選單？ (說明)
如何利用 CSS 製作多級選單？ (樣品)

標籤雲

deom-01

deom-02