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="width: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>
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有