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

最新推荐文章于 2021-10-20 17:10:26 发布

cdcdhj

最新推荐文章于 2021-10-20 17:10:26 发布

阅读量119

点赞数

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

本文链接：https://blog.csdn.net/cdcdhj/article/details/116235866

版权

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

124 篇文章 0 订阅

订阅专栏

<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>

cdcdhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript设置单项的二级菜单或是下拉菜单

<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-siz
复制链接

扫一扫