摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>导航栏下拉菜单</title> <style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏下拉菜单</title>
<style>
/*导航条*/
div{width: 100%;
background: #2F3E45;
height: 52px;
}
/*unorder 样式去除*/
ul{
list-style: none;
}
/*一级li标签左浮动*/
.nav>li{
float: left;
}
/*ul a标签相关属性*/
ul a{
display: block;/*块级元素*/
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
border: 1px solid blue;
}
/*导航栏第一级菜单第一个li标签边框第1、第4角设置为10px圆角*/
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
/*导航栏第一级菜单最后一个li标签边框第2、第3角设置为10px圆角*/
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
/*产品分类之子菜单*/
.drop-sub{
padding: 0;
display: none;
}
.drop-sub01{
padding: 0;
display: none;
}
/*浮动子菜单背景色及字体颜色*/
.drop-sub li:hover a{
background-color:purple;
}
.drop-sub01 li:hover a{
background-color:red;
}
/*产品分类hover显示子菜单*/
.nav .drop-down:hover .drop-sub{
display: block;
}
.nav .drop-down01:hover .drop-sub01{
display: block;
}
/* .nav li:hover a{color: blue;}*/
</style>
<script type="text/javascript">
function dianwo(x){
x.style.borderRadius="50px";
x.style.background="purple";
alert("WWW.51SPEC.COM");
x.style.width="200px"
}
</script>
</head>
<body ="dianwo(this)">
<div>
<ul class="nav">
<li ><a href="#" onclick="dianwo(this)">点我</a></li>
<li class="drop-down" onClick="while(1==1){alert('猪是念着倒')}"><a href="http://www.51spec.com" target="_blank">不要点我</a>
<ul class="drop-sub">
<li><a href="http://www.51spec.com" target="_blank">电气电子</a></li>
<li><a href="http://www.51spec.com" target="_blank">传感测量</a></li>
<li><a href="http://www.51spec.com" target="_blank">自动控制</a></li>
</ul>
</li>
<li class="drop-down01"><a href="http://www.51spec.com" target="_blank">品牌汇</a>
<ul class="drop-sub01">
<li><a href="http://www.51spec.com" target="_blank">霍尼韦尔</a></li>
<li><a href="http://www.51spec.com" target="_blank">高诺斯</a></li>
<li><a href="http://www.51spec.com" target="_blank">快达</a></li>
<li><a href="http://www.51spec.com" target="_blank">威图</a></li>
</ul>
</li>
<li><a href="http://www.51spec.com" target="_blank">资料下载</a></li>
<li><a href="http://www.51spec.com" target="_blank">资讯中心</a></li>
</ul>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-12-29 09:40:38
老师总结：确实搞事情了，我就倒着念了……作业完成的不错，事件方法最好都测试一下奥！
