zoukankan      html  css  js  c++  java
  • CSS学习之创建一个简单的导航栏下拉菜单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    		<title>note_top.html</title>
    
    		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    		<meta http-equiv="description" content="this is my page">
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    		<style type="text/css">
    .top-ul {
    	z-index: 1000;
    	position: absolute;
    	top: 0px;
    	background: #333;
    	 100%;
    	left: 0px;
    }
    
    .top-ul #top-left-ul {
    	 80%;
    	float: left;
    }
    
    .top-ul #top-right-ul {
    	 20%;
    	float: right;
    }
    
    .top-ul #top-right-ul ul {
    	right: 0px;
    	position: absolute;
    }
    
    .top-ul ul {
    	font-family: "微软雅黑", "宋体", Arial;
    	margin-top: 0px;
    	list-style-type: none;
    }
    
    .top-ul #top-left-ul ul {
    	direction: rtl;
    }
    
    .top-ul #top-right-ul ul {
    	direction: ltr;
    }
    
    .top-ul ul li {
    	float: left;
    }
    
    .top-ul ul li a {
    	display: block;
    	height: 26px;
    	padding: 6px 10px 0 10px;
    	text-decoration: none;
    	color: #ddd;
    }
    
    .top-ul ul li a:hover {
    	background: #5EB2E5;
    	color: #FFFFFF;
    }
    
    .top-ul  ul li .current_page_item {
    	background: #FFFFFF;
    	color: #6E7073;
    }
    
    .top-ul ul li .current_page_item:hover {
    	background: #FF8800;
    	color: #FFFFFF;
    }
    
    #menu {
    	font-family: "微软雅黑", "宋体", Arial;
    	font-size: 13px;
    	margin: 0 auto;
    	border: solid 1px #CCC;
    	 120px;
    	display: none;
    }
    
    #menu a,#menu a:visited {
    	text-decoration: none;
    	text-align: center;
    	color: #c00;
    	display: block;
    	padding: 4px;
    	background-color: #fff;
    	border: 1px solid #fff;
    	height: 1em;
    	position: relative;
    }
    
    #menu a:hover span {
    	display: block;
    	height: 0;
    	 0;
    	border: solid 8px #fff;
    	top: 4px;
    	position: absolute;
    }
    
    #menu a:hover span.left {
    	border-left-color: #333;
    	left: 0px;
    }
    
    #menu a:hover span.right {
    	border-right-color: #333;
    	right: 0px;
    }
    </style>
    	</head>
    	<script type="text/javascript" src="jquery-1.7.js"></script>
    	<script type="text/javascript">
    	$(document).ready(function(){
    		$("#more").mouseover(function(){
    		    var more=$("#more");
    			var position=more.offset();;
    			var x=position.left;
    			$("#menu").attr("style","display:block;position:absolute;left:"+x+"");
    			}
    		);
    		$("#more").mouseout(function(){
    			$("#menu").css("display","none");
    		});	
    		$("#menu").mouseout(function(){
    			$("#menu").css("display","none");
    		});	
    		$(".menu_item").mouseover(function(){
    			$("#menu").css("display","block");
    		});
    	});
    		</script>
    	<body>
    		<div class="top-ul">
    			<div id="top-left-ul">
    				<ul>
    					<li>
    						<a href="">首页</a>
    					</li>
    					<li>
    						<a href="" class="current_page_item">记录</a>
    					</li>
    					<li>
    						<a href="">空间</a>
    					</li>
    					<li>
    						<a href="">好友</a>
    					</li>
    					<li>
    						<a href="">消息</a>
    					</li>
    					<li>
    						<a href="" style="" id="more">更多</a>
    					</li>
    
    				</ul>
    			</div>
    
    			<div id="top-right-ul">
    				<ul>
    					<li>
    						<a href="">登录</a>
    					</li>
    					<li>
    						<a href="">注册</a>
    					</li>
    				</ul>
    			</div>
    		</div>
    		<div id="menu">
    			<a href="#" class="menu_item"> <span class="left"></span> 附件 <span
    				class="right"></span> </a>
    			<a href="#" class="menu_item"> <span class="left"></span> 最近联系人 <span class="right"></span> </a>
    			<a href="#" class="menu_item"> <span class="left"></span> 整理
    				<span class="right"></span> </a>
    			<a href="#" class="menu_item"> <span class="left"></span> 标签 <span class="right"></span> </a>
    			<a href="#" class="menu_item"> <span class="left"></span> 小册子 <span
    				class="right"></span> </a>
    		</div>
    	</body>
    </html>
    

      

  • 相关阅读:
    SCILAB简介[z]
    UG OPEN API编程基础 2约定及编程初步
    Office 2003与Office 2010不能共存的解决方案
    UG OPEN API 编程基础 3用户界面接口
    NewtonRaphson method
    UG OPEN API编程基础 13MenuScript应用
    UG OPEN API编程基础 14API、UIStyler及MenuScript联合开发
    UG OPEN API编程基础 4部件文件的相关操作
    UG OPEN API编程基础 1概述
    16 UG Open的MFC应用
  • 原文地址:https://www.cnblogs.com/tatame/p/2655719.html
Copyright © 2011-2022 走看看