写作目的
花了一个月左右的时间，学完了HTML5和CSS的基础知识，主要通过W3school、菜鸟教程和网易云课堂的网课。学习过程中CSDN的很多博客给了我帮助和启发，效果要比生硬的教程好得多。因此，开始实战练习的过程中，把每个案例的实现及其思路记录在这里，作为总结。
常用下拉菜单
主要用于网站首页导航栏的常用下拉菜单
实现思路
1、div盒子模型作为容器，下拉菜单整体为一个div，下拉菜单内容作为一个嵌套div。
2、构建两个类，一个为dropdown下拉菜单（导航一级菜单），一个为dropdown-content下拉内容（下拉子菜单）。
3、下拉内容部分display进行隐藏。
4、运用锚伪类hover，鼠标悬停一级菜单时改变背景颜色和块状元素显示，来实现菜单下拉。鼠标悬停下拉菜单内容链接时，改变背景颜色，实现切换菜单的效果。
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.dropdown{
display: inline-block;
position: relative;
background-color: #FFA500;
min-width: 200px;
text-align: center;
line-height: 50px;
height: 50px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content{
display: none;
position: absolute;
background-color:whitesmoke;
min-width: 200px;
text-align: center;
height: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
color: #000000;
display: block;
text-decoration: none;
}
.dropdown:hover .dropdown-content{
display: block;
}
.dropdown-content a:hover{
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="dropdown">
<span>简介</span>
<div class="dropdown-content">
<a href="http://www.runoob.com">140</a>
<a href="http://www.runoob.com">160</a>
<a href="http://www.runoob.com">180</a>
</div>
</div>
</body>
</html>
难点：
1.块状元素内文字垂直居中：设置line-height等于height
2.下拉菜单每个链接的block大小与一级菜单保持一致：设置min-width与一级菜单一致，设置height等于一级菜单height*下拉子菜单链接个数。