超級漂亮的CSS多級透明展開菜單

2024-09-05 12:19:51

字體：大中小

來源：轉載

供稿：網友

這個菜單非常不錯，超級漂亮，純CSS實現，支持多級展開，而且還是透明的，看看codefans.net 截圖，是不是很漂亮，相信很多朋友會喜歡的。點擊運行后，稍等待片刻，需要加載背景圖片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>CSS透明菜單</title><style>#nav {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; BACKGROUND: url(/jscss/demoimg/200905/transparent.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 10px arial, verdana, sans-serif; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: relative}#nav UL {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; BACKGROUND: url(/jscss/demoimg/200905/transparent.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 10px arial, verdana, sans-serif; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: relative}#nav {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000; PADDING-BOTTOM: 0px; WIDTH: 740px; PADDING-TOP: 0px; HEIGHT: 23px}#nav TABLE {	BORDER-COLLAPSE: collapse}#nav LI {	FLOAT: left}#nav LI LI {	FLOAT: none}#nav LI A LI {	FLOAT: left}#nav LI A {	PADDING-RIGHT: 20px; DISPLAY: block; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FLOAT: left; PADDING-BOTTOM: 0px; BORDER-LEFT: #000 1px solid; COLOR: #fff; LINE-HEIGHT: 22px; PADDING-TOP: 0px; WHITE-SPACE: nowrap; HEIGHT: 23px; TEXT-DECORATION: none}#nav LI LI A {	FLOAT: none; LINE-HEIGHT: 20px; HEIGHT: 21px}#nav LI:hover {	Z-INDEX: 100; POSITION: relative}#nav A:hover {	Z-INDEX: 100; BACKGROUND: #843; BORDER-LEFT: #843 1px solid; COLOR: #fff; POSITION: relative}#nav LI:hover > A {	BACKGROUND: #843; BORDER-LEFT: #843 1px solid; COLOR: #fff}#nav :hover UL {	Z-INDEX: 300; LEFT: 0px; BORDER-LEFT: #843 1px solid; TOP: 23px}#nav A:hover UL {	LEFT: -1px}#nav UL {	LEFT: -9999px; POSITION: absolute; TOP: -9999px}#nav LI:hover LI:hover > UL {	LEFT: 0px; MARGIN-LEFT: 100%; TOP: 0px}#nav LI:hover > UL UL {	LEFT: -9999px; WIDTH: auto; POSITION: absolute; TOP: -9999px}#nav LI:hover LI:hover > A {	BACKGROUND: #843; BORDER-LEFT: #843 1px solid; COLOR: #fff}#nav LI A:hover UL LI A:hover {	BACKGROUND: #843}#nav A:hover A:hover UL {	LEFT: 100%; TOP: 0px}#nav A:hover A:hover A:hover UL {	LEFT: 100%; TOP: 0px}#nav A:hover A:hover A:hover A:hover UL {	LEFT: 100%; TOP: 0px}#nav A:hover A:hover A:hover A:hover A:hover UL {	LEFT: 100%; TOP: 0px}#nav A:hover UL UL {	LEFT: -9999px; POSITION: absolute; TOP: -9999px}#nav A:hover A:hover UL UL {	LEFT: -9999px; POSITION: absolute; TOP: -9999px}#nav A:hover A:hover A:hover UL UL {	LEFT: -9999px; POSITION: absolute; TOP: -9999px}#nav A:hover A:hover A:hover A:hover UL UL {	LEFT: -9999px; POSITION: absolute; TOP: -9999px}</style></head><body><h2>Skeleton 2 drop down menu</h2><ul id="nav"><li>Home</li><li>About us »	<ul>		<li>Who we are</li>		<li>What we do</li>		<li>Where to find us</li>	</ul></li><li>Products »	<ul>	<li>Tripods »		<ul>			<li>Monopods</li>			<li>Tripods</li>			<li>Adjutable head</li>			<li>Fixed</li>			<li>Flash mount</li>			<li>Floating head</li>		</ul>	</li>	<li>Films »		<ul>			<li>35mm</li>			<li>Color Print</li>			<li>Black and White</li>			<li>Roll</li>			<li>Color Slide</li>		</ul>	</li>	<li>Cameras »			<ul>			<li>Compact »				<ul>				<li>Canon</li>				<li>Nikon</li>				<li>Minolta</li>				<li>Pentax</li>				</ul>			</li>			<li>Digital »					<ul>					<li>Canon</li>					<li>Nikon »							<ul>							<li>Lenses »								<ul>									<li>Standard</li>									<li>Telephoto</li>									<li>Wide Angle</li>									<li>Fish Eye</li>									<li>Mirror</li>									<li>Macro</li>								</ul>							</li>							<li>Speedlight</li>							<li>Coolpix »									<ul>									<li>Coolpix S10</li>									<li>Coolpix L2</li>									<li>Coolpix S500</li>									<li>Coolpix P5000</li>									<li>Coolpix 4600</li>									<li>Coolpix S6 Silver</li>									</ul>							</li>							<li>D200</li>							<li>D80</li>							</ul>					</li>					<li>Minolta</li>					<li>Pentax</li>					</ul>			</li>			<li>SLR »				<ul>				<li>Canon</li>				<li>Nikon</li>				<li>Minolta</li>				<li>Pentax</li>				<li>Panasonic</li>				</ul>			</li>			</ul>		</li>	<li>Flash</li>	<li>Video</li>	</ul>	</li><li>FAQs »	<ul>		<li>Cameras</li>		<li>Film types</li>		<li>Digital Photography</li>	</ul></li><li>Privacy »	<ul>		<li>Privacy Policy</li>		<li>Privacy Statement</li>	</ul></li><li>Contact us</li></ul><img src="/d/file/p/2024/09-05/c73f6a6beaa6a12d312a355543f87270.jpg" alt="lady in black" title="" /></body></html>

上一篇：藍綠背景切換的漂亮CSS菜單

下一篇：純CSS仿Vista風格按鈕菜單條