[CSS3] 二级下拉导航-CSDN博客

本文介绍了一种使用HTML和CSS实现的蓝色下拉滑动二级导航菜单的设计方案。该菜单具备良好的交互体验，当鼠标悬停在导航主体上时，会平滑地展开二级菜单项，提供包括首页、关于我们、软件下载、招贤纳士及给我留言等五个主要分类。

<!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>