蜗牛—JavaScript学习之鼠标经过下拉菜单

最新推荐文章于 2024-05-04 22:46:35 发布

树上的大腰子

最新推荐文章于 2024-05-04 22:46:35 发布

阅读量667

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq1791422018/article/details/26145247

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { font:12px/25px 宋体; color:#333; background:#d4e8f3; }
ul,li { margin:0; padding:0; }
ul { list-style:none; }
ul li { float:left; position:relative; }
ul li a { display:block; width:80px; color:#fff; padding:0 10px; text-decoration:none; }
ul li a:link,ul li a:visited { background:#639c31; }
ul li a:hover,ul li a:active { background:#ff9c00; }
ul ul { position:absolute; left:0; top:25px; display:none; background:#fff; }
ul ul li { float:none; margin-top:1px; }
</style>
<script type="text/javascript">
function showMenu(obj)
{
	obj.getElementsByTagName("ul")[0].style.display = "block";
}
function hideMenu(obj)
{
	obj.getElementsByTagName("ul")[0].style.display = "none";
}
</script>
</head>

<body>
<div id="navbar">
	<ul>
		<li οnmοuseοver="showMenu(this)" οnmοuseοut="hideMenu(this)">
			<a href="#">手机数码</a>
			<ul>
				<li><a href="#">手机数码1</a></li>
				<li><a href="#">手机数码2</a></li>
				<li><a href="#">手机数码3</a></li>
			</ul>
		</li>
		<li οnmοuseοver="showMenu(this)" οnmοuseοut="hideMenu(this)">
			<a href="#">淘宝集市</a>
			<ul>
				<li><a href="#">淘宝集市1</a></li>
				<li><a href="#">淘宝集市2</a></li>
				<li><a href="#">淘宝集市3</a></li>
			</ul>
		</li>
		<li οnmοuseοver="showMenu(this)" οnmοuseοut="hideMenu(this)">
			<a href="#">品牌商城</a>
			<ul>
				<li><a href="#">品牌商城1</a></li>
				<li><a href="#">品牌商城2</a></li>
				<li><a href="#">品牌商城3</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>