• 纯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>
    
  • 相关阅读:
    P31 整体更新或新增 PUT
    P30 整体更新/替换资源 PUT
    P29 自定义错误信息和错误报告
    python: openpyxl带格式复制excel
    Android控件与布局——基础控件RadioButton
    EditText 使用详解
    Linux内核内存检测工具KASAN
    ISP基础(10)-Gamma校正及其实现
    ISP基础(08)-动态范围压缩
    ISP基础(07)-自动曝光
  • 原文地址:https://www.cnblogs.com/yingsmirk/p/2431003.html
Copyright © 2020-2023  润新知