新浪导航条js下拉菜单_鼠标移入移出

新浪导航条js下拉菜单_鼠标移入移出

效果图:

在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
		  	margin: 0;
			  padding: 0;
		}
		li {
		    list-style: none;		
			}
		a {
				text-decoration: none;
		}
		ul,li ,span{
				margin: 0;
				padding: 0;
		}
		.w {
				width: 1000px;
				margin: 0 auto;
		}
	#head {
			width: 100%;
			height: 39px;
			line-height: 39px;
			border-top: 3px solid #FF8500;
			background-color: #FCFCFC;
		}
		.head_D {
			margin-top: -2px;
		}
	  .head_z {
			float:left;
		}
		.head_z  li {
			float:left;
		}
		.head_z  li a {
			display: inline-block;
			font-size: 12px;
			padding: 0 12px;
			color: #4c4c4c;
		}
		.head_z  li a>span {
			display: inline-block;
			width: 8px;
			margin-left: 5px;
			font-size: 12px;
		}
		.head_y {
			float: left;
			margin-left: 370px;
		}
		.head_y li {
			float: left;
		}
		.head_y  li a {
			display: inline-block;
			font-size: 12px;
			padding: 0 18px;
			color: #4c4c4c;
		}
		.head_z  li a:hover,
		.head_y  li a:hover {
			background-color: #edeef0;
			color: #FF8500;
		}
		.head_y  li a>span {
			display: inline-block;
			width: 8px;
			margin-left: 5px;
			font-size: 12px;	
		}
		.li_ts {
			position: relative;
		}
		.head_y li>ul {
			position: absolute;
			display: none;
		}
		.head_y li>ul li {
	  	width: 100%;
			border: 1px solid #FF8500;
			border-top: 0;
		}
		.head_y li>ul a {
			display: block;
			padding-left: 12px;
			line-height: 31px;
		}
		.head_y li>ul a:hover {
			background-color:	#FFF5DA;
		}
	</style>
</head>
<body>
	  <div id="head">
			 <div class="w head_D">
					<!-- 左侧导航 -->
					<ul class="head_z">
						<li><a href="#">设为首页</a></li>
						<li><a href="#">手机新浪网</a></li>
						<li><a href="#">移动客户端<span>></span></a></li>
					</ul>
					<!-- 右侧导航 -->
					<ul class="head_y">
						<li><a href="#">登录</a></li>
						<li class="li_ts">
							<a href="#">微博<span>></span></a>
							<!-- 下拉菜单 -->
							<ul class="xia_la">			
								<li><a href="#">私信</a></li>
								<li><a href="#">评论</a></li>
								<li><a href="#">@我</a></li>					
					   </ul>
						</li>
						<li><a href="#">博客<span>></span></a></li>
						<li><a href="#">邮箱<span>></span></a></li>
						<li><a href="#">网站导航</a></li>
					</ul>
			 </div>
		</div>
</body>
	<script>
		var li = document.querySelector('.li_ts');
		var caid = document.querySelector('.xia_la');
		li.onmouseover = function () {
		  if(	caid.style.display = 'none'){
				caid.style.display = 'block';
			}
		}
		li.onmouseout = function () {
		  if(	caid.style.display = 'block'){
				caid.style.display = 'none';
			}
		}
	</script>
</html>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页