纯css 二级导航菜单[支持IE6,IE7]

作者：简简单单 2009-12-15

提示：您可以先修改部分代码再运行

<div id="outer">
	<div id="menuHolder">
		<ul id="dropline">
			<li class="first"><a href="index.html"><b>Home</b></a>
			
			<div>
				<ul class="blank">
					<li></li>
				</ul>
			</div>
			
			</li>
			<li><a href="single.html"><b>Single Level</b></a>
			
			<div>
				<ul class="blank">
					<li></li>
				</ul>
			</div>
			
			</li>
			<li><a href="dropdown.html"><b>Dropdown</b></a>
			
			<div>
				<ul>
					<li><a href="http://www.111com.net">Dropdown One</a></li>
					<li><a href="http://www.111com.net">Dropdown Two</a></li>
					<li><a href="http://www.111com.net">Dropdown Three</a></li>
					<li><a href="http://www.111com.net">Dropdown Four</a></li>
					<li><a class="last" href="http://www.111com.net">Dropdown Five</a></li>
				</ul>
			</div>
			
			</li>
			<li class="current"><a href="dropline.html"><b>Dropline</b></a>
			
			<div>
				<ul>
					<li><a href="http://www.111com.net">Dropline One</a></li>
					<li class="current_sub"><a href="http://www.111com.net">Dropline Two</a></li>
					<li><a href="http://www.111com.net">Dropline Three</a></li>
					<li><a class="last" href="http://www.111com.net">Dropline Four</a></li>
				</ul>
			</div>
			
			</li>
			<li><a href="flyout.html"><b>Flyout</b></a>
			
			<div>
				<ul class="right">
					<li><a href="http://www.111com.net">Flyout One</a></li>
					<li><a href="http://www.111com.net">Flyout Two</a></li>
					<li><a href="http://www.111com.net">Flyout Three</a></li>
					<li><a href="http://www.111com.net">Flyout Four</a></li>
					<li><a class="last" href="http://www.111com.net">Flyout Five</a></li>
				</ul>
			</div>
			
			</li>
			<li><a href="support.html"><b>Support</b></a>
			
			<div>
				<ul class="blank">
					<li></li>
				</ul>
			</div>
			
			</li>
			<li class="last"><a href="contact.html"><b>Contact</b></a>
			
			<div>
				<ul class="blank">
					<li></li>
				</ul>
			</div>
			
			</li>
		</ul>
	</div>
</div>
<style>
#outer { position:absolute; top:145px; left:0; background:transparent;  overflow:hidden;}

#menuHolder {position:relative; float:left; left:50%;}

#dropline {padding:0; margin:0; list-style:none; float:left; position:relative; right:50%;}
#dropline div {position:absolute; left:-9999px; width:100%; z-index:10;  border-top:4px solid #e60; top:35px; background:#fff;}
#dropline ul {padding:0; margin:0; list-style:none;}
#dropline table {border-collapse:collapse: padding:0; margin:-1px -10px; width:0; height:0;}

#dropline li ul {position:relative; float:left; left:50%;}
#dropline li ul li {float:left; position:relative; right:50%;}
#dropline li ul li a {display:block; float:left; padding:0 10px; background:transparent; color:#000; font-weight:bold;}
#dropline li ul li a:hover {text-decoration:underline; background:transparent; color:#000;}

#dropline li {float:left; margin-right:1px;}
#dropline li.last {margin:0;}
#dropline li a {display:block; float:left;  padding:0 0 0 20px; line- text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:13px; text-decoration:none; color:#000; background:url(http://www.111com.net/blog/upload/image/20091215072746.png);}
#dropline li a b {display:block; float:left;  padding:0 20px 0 0; background:url(http://www.111com.net/blog/upload/image/20091215072746.png) right top; cursor:pointer;}

#dropline li a:hover {background:url(http://www.111com.net/blog/upload/image/20091215072808.png); color:#fff; border:0;}
#dropline li a:hover b {background:url(http://www.111com.net/blog/upload/image/20091215072808.png) right top;}

#dropline li:hover > a {background:url(http://www.111com.net/blog/upload/image/20091215072808.png); color:#fff; border:0;}
#dropline li:hover > a b {background:url(http://www.111com.net/blog/upload/image/20091215072808.png) right top;}

#dropline :hover div {left:0;}

#dropline li.current a,
#dropline li.current a:hover {background:url(http://www.111com.net/blog/upload/image/20091215072832.png); color:#fff; font-weight:bold;}
#dropline li.current a b,
#dropline li.current a:hover b {background:url(http://www.111com.net/blog/upload/image/20091215072832.png) right top; color:#fff;}

#dropline li.current a:hover ul li a:hover {color:#000; background:transparent;}
#dropline li.current:hover ul li a:hover {color:#000; background:transparent;}

#dropline li.current div {width:100%; left:0; top:35px; background:#fff; z-index:5;}
#dropline li.current ul {position:relative; float:left; left:50%;}
#dropline li.current ul li {float:left; position:relative; right:50%;}
#dropline li.current ul li a {display:block; float:left; padding:0 10px; background:transparent; color:#000; font-weight:bold;}
#dropline li.current ul li.current_sub a {display:block; float:left; padding:0 10px; background:transparent; color:#c00; text-decoration:underline;}
#dropline li.current ul li.current_sub a:hover {text-decoration:underline; background:transparent; color:#c00;}

* html #dropline li.current div {width:expression(document.getElementById('dropline').offsetWidth);}
* html #dropline li a:hover div {width:expression(document.getElementById('dropline').offsetWidth);}
</style>

提示：您可以先修改部分代码再运行

纯css 二级导航菜单[支持IE6,IE7]

相关文章

精彩推荐