纯css导航菜单制作下拉三级菜单代码



107 427 143



特效描述:导航菜单 下拉三级菜单,水平式三级下拉菜单

代码结构

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

加群请备注:从官网了解到