純css導航菜單制作下拉三級菜單代碼



111 441 148



特效描述:導航菜單 下拉三級菜單,水平式三級下拉菜單

代碼結構

1. HTML代碼

<div class="menu">
	<ul>
		<li>
		<a class="hide" href="#">主頁</a>
		<!--[if lte IE 6]>
		<a href="#">DEMOS
		<table><tr><td>
		<![endif]-->
			<ul>
				<li><a href="/" title="無">一</a></li>
				<li><a href="/" title="無">二</a></li>
				<li><a href="/" title="無">三</a></li>
				<li><a href="/" title="無">四</a></li>
				<li>
					<a class="hide" href="/" title="無">五</a>
					<!--[if lte IE 6]>
					<a class="sub" href="#" title="解釋">顯示
					<table><tr><td>
					<![endif]-->
					<ul class="right_side">
						<li><a href="/" title="">一</a></li>
						<li><a href="/" title="">二</a></li>
						<li><a href="/" title="">三</a></li>
					</ul>
					<!--[if lte IE 6]>
					</td></tr>如上</table>
					</a>
					<![endif]-->
				</li>
				<li><a href="/" title="">一</a></li>
				<li><a href="/" title="">二</a></li>
			</ul>
			<!--[if lte IE 6]>
			</td></tr></table>
			</a>
			<![endif]-->
		</li>
		<li>
			<a class="hide" href="index.html">一</a>
			<!--[if lte IE 6]>
			<a href="#">MENUS
			<table><tr><td>
			<![endif]-->
			<ul>
				<li><a href="/" title="">1</a></li>
				<li><a href="/" title="">2</a></li>
				<li><a href="/" title="">3</a></li>
				<li><a href="/" title="">4</a></li>
				<li><a href="/" title="">5</a></li>
				<li><a href="/" title="">6</a></li>
				<li><a href="/" title="">7</a></li>
			</ul>
			<!--[if lte IE 6]>
			</td></tr></table>
			</a>
			<![endif]-->
		</li>
		<li>
			<a class="hide" href="#">LAYOUTS</a>
			<!--[if lte IE 6]>
			<a href="#">LAYOUTS
			<table><tr><td>
			<![endif]-->
			<ul>
				<li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li>
				<li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li>
				<li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li>
				<li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li>
				<li><a href="#" title="A simple minimum width layout">minimum width</a></li>
			</ul>
			<!--[if lte IE 6]>
			</td></tr></table>
			</a>
			<![endif]-->
		</li>
		<li>
			<a class="hide" href="#">BOXES</a>
			<!--[if lte IE 6]>
			<a href="#">BOXES
			<table><tr><td>
			<![endif]-->
			<ul>
				<li><a href="#" title="a coded list of spies">spies menu</a></li>
				<li><a href="#" title="a horizontal vertical menu">vertical menu</a></li>
				<li><a href="#" title="an enlarging unordered list">enlarging list</a></li>
				<li><a href="#" title="an unordered list with link images">link images</a></li>
				<li><a href="#" title="non-rectangular links">non-rectangular</a></li>
				<li><a href="#" title="jigsaw links">jigsaw links</a></li>
				<li><a href="#" title="circular links">circular links</a></li>
			</ul>
			<!--[if lte IE 6]>
			</td></tr></table>
			</a>
			<![endif]-->
		</li>
		<li>
			<a class="hide" href="#">MOZILLA</a>
			<!--[if lte IE 6]>
			<a href="#">MOZILLA
			<table><tr><td>
			<![endif]-->
			<ul>
				<li><a href="#" title="A drop down menu">drop down menu</a></li>
				<li><a href="#" title="A cascading menu">cascading menu</a></li>
				<li><a href="#" title="Using content:">content:</a></li>
				<li><a href="#" title=":hover applied to a div">mozzie box</a></li>
				<li><a href="#" title="I can build a rainbow">rainbow box</a></li>
				<li><a href="#" title="Snooker cue">snooker cue</a></li>
				<li><a href="#" title="Target Practise">target practise</a></li>
			</ul>
			<!--[if lte IE 6]>
			</td></tr></table>
			</a>
			<![endif]-->
		</li>
		<li>
			<a class="hide" href="#">EXPLORER</a>
			<!--[if lte IE 6]>
			<a href="#">EXPLORER
			<table><tr><td>
			<![endif]-->
			<ul class="right_side">
				<li><a href="#" title="Example one">example one</a></li>
				<li><a href="#" title="Weft fonts">weft fonts</a></li>
				<li><a href="#" title="Vertical align">vertical align</a></li>
			</ul>
			<!--[if lte IE 6]>
			</td></tr></table>
			</a>
			<![endif]-->
		</li>
		<li>
			<a class="hide" href="#">OPACITY</a>
			<!--[if lte IE 6]>
			<a href="#">OPACITY
			<table><tr><td>
			<![endif]-->
			<ul class="right_side">
				<li><a href="#" title="colour wheel">opaque colours</a></li>
				<li><a href="#" title="a menu using opacity">opaque menu</a></li>
				<li><a href="#" title="partial opacity">partial opacity</a></li>
				<li><a href="#" title="partial opacity II">partial opacity II</a></li>
				<li>
					<a class="hide" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
					<!--[if lte IE 6]>
					<a class="sub" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK
					<table><tr><td>
					<![endif]-->
					<ul class="left_side">
						<li><a href="#" title="Styling forms">styled form</a></li>
						<li><a href="#" title="Removing active/focus borders">active focus</a></li>
						<li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li>
					</ul>
					<!--[if lte IE 6]>
					</td></tr></table>
					</a>
					<![endif]-->
				</li>
			</ul>
			<!--[if lte IE 6]>
			</td></tr></table>
			</a>
			<![endif]-->
		</li>
	</ul>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 導航切換 菜單切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子