javascript设置单项的二级菜单或是下拉菜单

最新推荐文章于 2023-11-05 20:49:09 发布

cdcdhj

最新推荐文章于 2023-11-05 20:49:09 发布

阅读量151

点赞数

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/cdcdhj/article/details/116235866

版权

javascript学习日记专栏收录该内容

151 篇文章

订阅专栏

这段代码展示了如何使用HTML、CSS和JavaScript实现一个二级导航菜单。当鼠标悬停在‘菜品展示’菜单项上时，会显示下拉菜单，包含三个子菜单项。下拉菜单在页面加载时默认隐藏，通过鼠标移入和移出事件来控制其显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head><title>二级导航或是下拉菜单</title></head>
<style type="text/css">
* html,body{
	margin:0;
	padding:0;
	font:12px verdana, sans-serif; font-size:small;
}
#nav{
	width:800px;
	height:50px;
	margin:0 auto;
	background-color:#FF8C00;
}
#nav ul{
	list-style:none;
	margin:0;
	padding:0;
	border:1px solid yellow;
	height:50px;
}
#nav li{
	float:left;
	width:80px;
	line-height:18px;
	text-align:center;
	font-size:18px;
	margin-top:15px;
	position:relative;
}
</style>
<body>
<div id="nav">
	<ul>
		<li>首页</li>
		<li>公司介绍</li>
		<li>菜品展示</li>
		<li>店面展示</li>
		<li>联系我们</li>
	</ul>
</div>
<script language="javascript">

	var a=document.getElementsByTagName('li')[2];   //先获取到需要下拉菜单的列，然后创建ul和li,然后再写他们的样式，千万不能写到鼠标事件内
	var u=document.createElement('ul');
	var l=document.createElement('li');
	var l2=document.createElement('li');
	var l3=document.createElement('li');
	l.innerHTML="<a href='#'>子菜单</a>";
	l2.innerHTML="<a href='#'>子菜单</a>";
	l3.innerHTML="<a href='#'>子菜单</a>";
	u.appendChild(l);
	u.appendChild(l2);
	u.appendChild(l3);
	a.appendChild(u);
	u.style.border="none";
	u.style.top="15px";
	u.style.position="relative";
	u.style.backgroundColor="#F5deb3";
	u.style.height="110px";
	(window.load=function(){							//防止打开网站后下拉菜单就弹出的情况
		var cu=document.getElementsByTagName('ul')[1];
		cu.style.display="none";
	})()
	a.onmouseover=function(){							//移入时显示
		var cu=document.getElementsByTagName('ul')[1];
		cu.style.display="block";
};
	a.onmouseout=function(){							//移出时隐藏
		var cu=document.getElementsByTagName('ul')[1];
		cu.style.display="none";
};



</script>
</body>
</html>