纯CSS实现下拉菜单

<!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>

 

你可能感兴趣的:(下拉菜单)