educoder实训 太原理工大学web课程————JavaScript对象：字符串_玛卡巴卡的博客-CSDN博客
商城下拉菜单的制作
任务描述
本关任务： 实现对a标签字体背景颜色的修改，要求颜色型号（#06F）。 选择鼠标指针浮动在a标签上的颜色样式，要求颜色样式（#FF3）。
相关知识
为了完成本关任务，你需要掌握：a标签样式设置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商城下拉菜单</title>
<!-- ********* Begin ********* -->
<style type="text/css">
*{margin:0; padding:0; list-style:none; border:none; color:#fff;}
a:link,a:visited{text-decoration:none;}
/* ********* Begin ********* */
/* ********* End ********* */
#bg{
width:600px;
margin:30px auto;
}
a:hover{color:#FF3;}
a{ background:#06F;
width:150px;
height:36px;
display:inline-block;
text-align:center;
line-height:36px;
/* ********* Begin ********* */
/* ********* End ********* */
}
li{float:left;}
#dis li{clear:left; margin-top:1px;}
</style>
<!-- ********* End ********* -->
</head>
<body>
<ul id="bg">
<li><a href="#">服装鞋帽</a></li>
<li id="btn">
<a href="#">数码家电</a>
<ul id="dis">
<li><a href="#">手机/对讲机</a></li>
<li><a href="#">电脑/路由器</a></li>
<li><a href="#">音响/麦克风</a></li>
</ul>
</li>
<li><a href="#">话费充值</a></li>
<li><a href="#">母婴用品</a></li>
</ul>
</body>
</html>第2关：商城下拉菜单鼠标事件的应用
任务描述
本关任务：补充函数完成鼠标事件实现下拉菜单功能
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商城下拉菜单</title>
<style type="text/css">
*{margin:0; padding:0; list-style:none; border:none; color:#fff;}
a:hover{color:#FF3;}
a:link,a:visited{text-decoration:none;}
#bg{
width:600px;
margin:30px auto;
}
a{
width:150px;
height:36px;
display:inline-block;
text-align:center;
line-height:36px;
background:#06F;
}
li{float:left;}
#dis li{clear:left; margin-top:1px;}
</style>
</head>
<body>
<ul id="bg">
<li><a href="#">服装鞋帽</a></li>
<li id="btn">
<a href="#">数码家电</a>
<ul id="dis">
<li><a href="#">手机/对讲机</a></li>
<li><a href="#">电脑/路由器</a></li>
<li><a href="#">音响/麦克风</a></li>
</ul>
</li>
<li><a href="#">话费充值</a></li>
<li><a href="#">母婴用品</a></li>
</ul>
<script type="text/javascript">
/* ********* Begin ********* */
var btn=document.getElementById('btn');
var dis=document.getElementById('dis');
/* ********* End ********* */
btn.onmouseover=function(){dis.style.display='block';
/* ********* Begin ********* */
/* ********* End ********* */
}
btn.onmouseout=function(){dis.style.display='none';
/* ********* Begin ********* */
/* ********* End ********* */
}
</script>
</body>
</html>