纯CSS实现下拉菜单

最新推荐文章于 2025-09-11 10:42:34 发布

转载最新推荐文章于 2025-09-11 10:42:34 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yingsmirk/archive/2012/04/03/2431003.html

文章标签：

#xhtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		
		<style type="text/css">
		
			body,ul,li,a{ 
				margin:0;
				padding:0;
			}
			
			#home .nav{
				margin-left:50px;
				list-style-type: none;
				overflow: hidden;
			}
			
			#home .nav ul{
				position:absolute;
				list-style-type: none;
				overflow: hidden;
				left:-999px;
				margin-left:-1px;
			}
			
			#home .nav li{
				float: left;
				line-height: 30px;
				width:120px;
				background-color: #92E438;
				border:#5DBB0F 1px solid;
				text-align: center;
				
			}
			#home .nav li ul li {
				float:none;

			}
			#home .nav li:hover ul{
				left:auto;
			}
			#home .nav a{
				display:block;
				width:120px;
				height: 30px;
				text-decoration:none;
				color:#fff;
			}
			ul a:hover,
			ul a:focus{
				color:#F0F0F0;
				background-color:#00B344;
			}
		</style>
	</head>
	<body id="home">
		<ul class="nav">
   		    <li class="first"><a href="#">Home</a>
   		    	<ul>
   		    		<li><a href="/services/design/">Design</a></li>
					<li><a href="/services/development/">Development</a></li>
					<li><a href="/services/consultancy/">Consultancy</a></li>
   		    	</ul>
   		    </li>
			<li><a href="#">About</a>
				<ul>
   		    		<li><a href="/services/design/">Design</a></li>
					<li><a href="/services/development/">Development</a></li>
					<li><a href="/services/consultancy/">Consultancy</a></li>
   		    	</ul>
			</li>
			<li><a href="#">News</a>
				<ul>
   		    		<li><a href="/services/design/">Design</a></li>
					<li><a href="/services/development/">Development</a></li>
					<li><a href="/services/consultancy/">Consultancy</a></li>
   		    	</ul>
			</li>
			<li><a href="#">Products</a>
				 <ul>
   		    		<li><a href="/services/design/">Design</a></li>
					<li><a href="/services/development/">Development</a></li>
					<li><a href="/services/consultancy/">Consultancy</a></li>
   		    	</ul>
			</li>
			<li><a href="#">Services</a>
				 <ul>
   		    		<li><a href="/services/design/">Design</a></li>
					<li><a href="/services/development/">Development</a></li>
					<li><a href="/services/consultancy/">Consultancy</a></li>
   		    	</ul>
			</li>
			<li><a href="#">Clients</a></li>
			<li><a href="#">Case Studies</a></li>
</ul>

	</body>
</html>

转载于:https://www.cnblogs.com/yingsmirk/archive/2012/04/03/2431003.html