JS横向延时2级下拉菜单

最新推荐文章于 2022-06-05 14:04:05 发布

波克比520

最新推荐文章于 2022-06-05 14:04:05 发布

阅读量978

点赞数

分类专栏： javascript 文章标签：定时器下拉菜单

本文链接：https://blog.csdn.net/u011175410/article/details/50221853

版权

本文介绍如何使用JavaScript和CSS创建一个具有延迟显示功能的2级横向下拉菜单。通过设置定时器，当鼠标悬停在菜单项上时，下拉子菜单会在一段时间后自动展开，离开时则会自动收起。内容详细讲解了CSS样式和JavaScript逻辑，提供预览效果。

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

CSS样式：

body{ font-size: 12px; color: #333;}
	body, ul,h2{ margin:0;padding:0;}
	li { list-style:none;}
	a{ color: #333; text-decoration: none;}
	a:hover{ color: #f00;}
	#nav { width:100%; border:1px solid #000; margin-bottom:10px;}
	#nav li{ display:inline-block; margin:10px 20px; font-size: 16px; font-weight: bold;}
	.nav li { float:left; margin: 0 5px; font-size:12px;}
	.nav { position:absolute; border:1px solid #666; padding: 5px; display:none;}
	.n1 { left:0;}
	.n2 { left:80px;}
	.n3 { left:200px;}

HTML部分：

<div class="menu">
		<ul id="nav">
		  <li><a href="#">首页</a></li>
		  <li><a href="#">产品中心</a></li>
		  <li><a href="#">关于我们</a></li>
		</ul>
		<ul class="nav n1">
		    <li><a hr