摘要：<!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-sub li:hover a{
background-color:orange;
color: black;
}
/*产品分类hover显示子菜单*/
.nav .drop-down:hover .drop-sub{
display: block;
}
/* .nav li:hover a{color: blue;}*/
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="http://www.51spec.com" target="_blank">首页</a></li>
<li class="drop-down"><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><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>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-12-27 09:25:11
老师总结：咋还是人生第一个呐？进度条要加快啊！加油！
