下拉菜单的实现，纯CSS实现下拉菜单与使用JS实现下拉菜单

最新推荐文章于 2023-12-28 18:29:15 发布

judas_jia

最新推荐文章于 2023-12-28 18:29:15 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/judas_jia/article/details/52599061

版权

JavaScirpt 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

我们经常会在网页中嵌入下拉菜单，下面分享一下下拉菜单的简单实现，当然我分享的内容只是简单的实现了基本功能，并不具有优雅的外观样式（仅提供功能实现思想），希望对有些朋友有帮助。

（1）纯css实现下拉菜单

<html>
<head>
<style type="text/css">
	li, ul{ list-style:none; }
	a{ text-decoration:none; }
	#box{ text-align:center; width:200px; }
	#list{ display:none; }
	#title:hover + ul{ display:block; }
</style>
</head>
<body>
<ul id="box"> 
	
		<a href="#" id="title">The List</a> 
		<ul id="list"> 
			<li><a href="#">list1</a></li> 
			<li><a href="#">list2</a></li> 
			<li><a href="#">list3</a></li> 
			<li><a href="#">list4</a></li> 
		</ul> 
</ul> 
</body>

</html>

（2）使用js实现下拉菜单

<html>
<head>
</head>
<title>JavaScript下拉菜单</title> 
<style type="text/css"> 

	a{ text-decoration:none; background-color:#00CC99; border:1px solid #fff;}
	li{ width:200px; }
	#list{ display:none; } 
	li, ul{ list-style:none; }

</style> 
<script type="text/javascript"> 
	window.οnlοad=function()
	{
		var title=document.getElementById("title");
		var list=document.getElementById("list");
		title.οnmοuseοver=function()
		{
		
			list.style.display="block";
		}
		title.οnmοuseοut=function()
		{
		
			list.style.display="none";
		}
	}

</script> 
</head> 
<body> 
<ul id=""> 
	
		<a href="#" id="title">The List</a> 
		<ul id="list"> 
			<li><a href="#">list1</a></li> 
			<li><a href="#">list2</a></li> 
			<li><a href="#">list3</a></li> 
			<li><a href="#">list4</a></li> 
		</ul> 
</ul> 

</body> 
</html>

代码写的粗劣，见谅嘞~ 在下也是小菜鸟一枚。