做一个新浪的下拉菜单

最新推荐文章于 2023-04-29 19:47:07 发布

溪山行旅1024

最新推荐文章于 2023-04-29 19:47:07 发布

阅读量2.4k

点赞数 5

分类专栏：一个半路出家的前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43190801/article/details/106856777

版权

一个半路出家的前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学到了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;
		}
		a {
			text-decoration: none;
			font-size: 14px;
		}
		li {
			list-style: none;
		}
		.nav {
			margin:100px;

		}
		.nav>li {
			position: relative;
			float: left;
			width: 80px;
			height: 41px;
			text-align: center;
		}
		.nav li a {
			display: block;
			width: 100%;
			height:100%;
			line-height: 41px;
			color: #333;
			
		}
		.nav>li>a:hover {
			background-color: red;
		}
		.nav ul {
			display: none;
			position: absolute;
			top: 41px;
			left: 0;
			width: 80px;
			border-left:1px solid #fecc5B;
			border-right:1px solid #fecc5B;

		}
		.nav ul li {
			border-bottom:1px solid #FECC5B;
		}

		.nav ul li:hover {
			background-color: #bbb;
		}

		
	</style>
</head>
<body>
	<ul class="nav">
		<li>
			<a href="#">登录</a>
		</li>
		<li >
			<a href="#">微博</a>
			<ul>
				<li>
					<a href="#">私信</a>
				</li>
				<li>
					<a href="#">评论</a>
				</li>
				<li>
					<a href="#">@我</a>
				</li>
			</ul>
		</li>
		<li class="didi">
			<a href="#">微博</a>
			<ul>
				<li>
					<a href="#">私信</a>
				</li>
				<li>
					<a href="#">评论</a>
				</li>
				<li>
					<a href="#">@我</a>
				</li>
			</ul>
		</li>
		<li class="didi">
			<a href="#">微博</a>
			<ul>
				<li>
					<a href="#">私信</a>
				</li>
				<li>
					<a href="#">评论</a>
				</li>
				<li>
					<a href="#">@我</a>
				</li>
			</ul>
		</li>
	</ul>
<script>
	 var  nav = document.querySelector('.nav');  //这里一直报错的原因都是类名一定要记得加点   不是nav 是.nav
	 var 	lis = nav.children;
	 for (var i =0 ;i<lis.length;i++) {
	 	lis[i].onmouseover = function() {
	 			this.children[1].style.display = 'block';
	 		//	console.log (this.children[0]);  记得UL是第二个孩子
	 			console.log (this.children[1]);
	 	}
	 	lis[i].onmouseout = function() {
	 		this.children[1].style.display = 'none';
	 	}
	 }


</script>

</body>
</html>

效果如下

方法就是显示部分用li 下面显示和隐藏部分用ul，分别在JS里设置鼠标事件引起的display 状态变化即可

溪山行旅1024

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
做一个新浪的下拉菜单

学到了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
复制链接

扫一扫