<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>蓝色下拉滑动二级导航菜单</title> <style type="text/css"> body{ margin:0; /*元素边距*/ font-family:'微软雅黑','Times New Roman', Times, serif; } /*字体样式*/ .navi_body{ overflow:hidden; /*隐藏内联块*/ height:50px; background:cadetblue; transition:height ease 0.5s; /*导航栏内容弹出-转变高度延长时间0.5S*/ } .navi_head{ height:50px; background:#459df5;/*导航栏背景颜色*/ } .navi_body:hover{ height:300px; /*鼠标移动到导航主体后 高度300px*/ } .navi_head>div>span{ width:150px; /*标签宽度*/ text-align:center; /*标签的对齐方式为居中*/ height:300px; display:inline-block;/*显示为内联块*/ font-weight:bold;/*字体宽度 粗体*/ color:#FFF; font-size:14px; vertical-align:top; /*垂直对齐顶部*/ } .navi_head>div>span>p a{ color:#FFF; text-decoration:none; /*文本装饰 无下划线*/ } .navi_head>div>span>p a:hover{ color:#FFF; text-decoration:underline;/*文本装饰 下划线*/ } .navi_title{ font-size:16px; line-height:50px; margin-top:0; } .navi_head>div>span:hover{ background:rgba(100,100,100,0.5); } </style> </head> <body> <div> <div class="navi_body"> <div class="navi_head"> <div style="80%; margin-left:auto; margin-right:auto;"> <span> <p class="navi_title">首页</p> </span> <span> <p class="navi_title">关于我们</p> <p><a href="">团队介绍</a></p> <p><a href="">服务QQ群</a></p> <p><a href="">个人业务</a></p> </span> <span> <p class="navi_title">软件下载</p> <p><a href="">WEB编译工具</a></p> <p><a href="">桌面整理工具</a></p> </span> <span> <p class="navi_title">招贤纳士</p> <p><a href="">WEB前端工程师</a></p> <p><a href="">JAVAWEB工程师</a></p> <p><a href="">APP开发工程师</a></p> <p><a href="">数据库工程师</a></p> <p><a href="">软件架构师</a></p> <p><a href="">技术客服</a></p> </span> <span> <p class="navi_title">给我留言</p> <p><a href="">站内留言</a></p> <p><a href="">站长信箱</a></p> </span> </div> </div> </div> </div> </div> </body> </html>