该博客展示了如何创建一个响应式的下拉导航菜单。当鼠标悬停在主菜单上时，二级菜单会以平滑的过渡效果展开，提供丰富的子选项。这个效果通过CSS的`transition`属性实现，使得菜单的展开和收起具有动画效果。
网页效果，显示主菜单，带你给用户鼠标移至主菜单时会产生下拉菜单，移开隐藏
以下为完整的代码和部分解释
整个父容器为300px，显示50px，鼠标移至主菜单则下拉250px
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>XuCaiyunLet'sDoIt</title>
<style type="text/css">
body{
margin:0;
font-family:'微软雅黑','Times New Roman', Times, serif; //font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
}
.navi_head{
height:50px;
background-color:#459df5;//持续显示的50px背景色为蓝色
}
.navi_body{
overflow:hidden; //显示navi_body的50px，其余全部剪去
height:50px;
background:rgba(36,97,158,0.9);
transition:height ease 0.5s;//transition属性：transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程
最低0.47元/天 解锁文章
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
