zoukankan      html  css  js  c++  java
  • 纯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;
    				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;
    				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>
    
  • 相关阅读:
    互联网+总决赛有感
    PyQt QListWidget修改列表项item的行高
    virtualenv 安装不同版本的虚拟环境的办法
    OpenDayLight Helium实验三 OpenDaylight二层转发机制实验
    OpenDayLight Helium实验一 OpenDaylight的C/S模式实验
    数据结构上机 经典进出栈问题
    【转载】解决telnet无法连接 Connection refused
    【Python初学者】准备
    OpenDayLight Helium安装
    Mininet实验 测量路径损耗率
  • 原文地址:https://www.cnblogs.com/yingsmirk/p/2431003.html
Copyright © 2011-2022 走看看