简单css下拉菜单效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单css下拉菜单效果实现</title>
<style type="text/css">
div {
list-style: none;
margin: 0 1px;float: left;
}
div :hover {
background-color: lightcoral;
}
.box1 {
width: 100%;
height: 40px;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 40px;
background-color: lightblue;
line-height: 40px;
text-align: center;
margin: 0 10px;
}
.box2a {
width: 100px;
height: 40px;
background-color: lightgrey;
line-height: 40px;
text-align: center;
display: none;
color: red;
margin: 0;
}
.box2:hover .box2a{display: block;}
</style>
</head>
<body>
<div class="box1">
<div class="box2">首页</div>
<div class="box2">视频教程</div>
<div class="box2">技术文章
<div class="box2a">php教程</div>
<div class="box2a">MySQL教程</div>
<div class="box2a">html教程</div>
</div>
<div class="box2">编程词典
<div class="box2a">PHP词典</div>
<div class="box2a">MySQL词典</div>
<div class="box2a">HTML词典</div>
<div class="box2a">Redis词典</div>
</div>
<div class="box2">资源下载
<div class="box2a">手册下载</div>
<div class="box2a">工具下载</div>
<div class="box2a">学习课件</div>
<div class="box2a">JS特效</div>
<div class="box2a">网站源码</div>
</div>
<div class="box2">其他</div>
</div>
</body>
</html>
个人总结：
在最外面定义一个大的div存放菜单项class等于box1，宽度为100%，里面放几个菜单div，class都等于box2，每个菜单下面再加div，class都等于box2a；
首先把div的float设置为left：向左浮动；设置box1的宽高和背景色，box2a的margin设置为0，如果不设置，会继承上一级属性，存在偏移；display设置为none（隐藏），然后通过：hover实现鼠标移动到上级菜单自动出现下级菜单。