用js来模拟下拉菜单

最新推荐文章于 2022-08-22 08:47:13 发布

小小怪同学呀

最新推荐文章于 2022-08-22 08:47:13 发布

阅读量981

点赞数 1

文章标签： javaScript

本文链接：https://blog.csdn.net/xxgTX/article/details/102560886

版权

本文介绍了如何使用JavaScript来模拟网站上的下拉菜单，提供了一种实现思路，并展示了运行效果。

摘要由CSDN通过智能技术生成

我们在网站上看到的下拉菜单，有些是通过js来模拟的，那么怎么模拟呢，可以借鉴一下以下思路：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.cont{
   width:200px;height:40px;margin: 30px auto;}
			.cont span{
   height:40px;line-height:40px;display: block;border: solid 1px black;}
			.cont ul{
   margin: 0;padding:0;list-style: none;border: solid 1px black;display: none;}
			.cont li{
   line-height: 30px;padding: 0 8px}
			.cont li.active{
   background: dodgerblue;color: #fff;}
		</style>
	</head>
	<body>
		<select>
			<option value="html5">html5</option>
			<opt