html+css 实现导航栏二级菜单—

页面效果展示：

代码实现：

HTML部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="CSS/bublle.css">
</head><body><div class="nav"><ul><li><a href="#">首页</a></li><li class="program1"><div class="nav-item nav-item1"><ul><li>中青志协</li><li>各地协会</li><li>伙伴组织</li><li>获奖组织</li></ul></div><a class="nav-a" href="#">志愿组织</a></li><li class="program2"><div class="nav-item nav-item2"><ul><li>关爱行动</li><li>西部计划</li><li>阳光行动</li><li>海外计划</li><li>暖冬行动</li><li>节水护水行动</li></ul></div><a class="nav-a" href="#">志愿项目</a></li><li class="program3"><a href="#">志愿文化</a></li><li class="program4"><div class="nav-item nav-item4"><ul><li>七彩小屋</li></ul></div><a class="nav-a" href="#">志愿阵地</a></li><li><div class="nav-item nav-item5"><ul><li>专家学者</li><li>骨干志愿者</li><li>注册志愿者</li><li>志愿学院</li></ul></div><a class="nav-a" href="#">志愿人才</a></li><li><a href="#">志愿发布</a></li><li><a href="#">志愿服务交流会</a></li><li class="program5"><div class="nav-item nav-item5"><ul><li>微博</li><li>微信</li></ul></div><a class="nav-a" href="#">志愿社区</a></li><li class="program6"><div class="nav-item nav-item6"><ul><li>助残系统</li><li>关爱系统</li><li>志愿中国</li></ul></div><a class="nav-a" href="#">登录 </a></li></ul></div></body></html>

CSS部分：

* {padding: 0;margin: 0;
}a {text-decoration: none;
}li {list-style: none;
}.nav {width: 100%;height: 57px;margin: 0 auto;background-color: #ebebeb;text-align: center;line-height: 57px;background: url(../img/边.gif) repeat-x center top;
}.nav>ul>li {position: relative;display: inline-block;
}.nav a {position: relative;display: inline-block;height: 52px;padding: 0 16px;font-size: 14px;color: #111;
}.nav a:hover {background-color: #db261f;color: #fff;
}.nav-item {display: none;position: absolute;width: 150px;/* height: 100px; */border: 1px solid pink;background-color: #ffece8;top: 111%;left: 50%;transform: translateX(-50%);
}.nav-item::before {content: "";position: absolute;top: -20px;left: 50%;transform: translateX(-50%);border: 10px solid pink;border-color: transparent transparent pink transparent;
}.nav-item::after {content: "";position: absolute;top: -19px;left: 50%;transform: translateX(-50%);border: 10px solid #ffece8;border-color: transparent transparent #ffece8 transparent;
}.nav-item>ul>li {height: 40px;line-height: 40px;
}.program1:hover .nav-item1,
.program2:hover .nav-item2,
.program3:hover .nav-item3,
.program4:hover .nav-item4,
.program5:hover .nav-item5,
.program6:hover .nav-item6 {display: block;
}

html+css 实现导航栏二级菜单——气泡框相关推荐

Axure RP9——【导航栏二级菜单的展开效果】
导航栏二级菜单的展开效果 Navigation Bar · secondary menu Here's how I want things to unfold. 目录导航栏二级菜单的展开效果 Nav ...
HTML+CSS实现导航栏二级下拉菜单图书案例
一.效果图二.内容.要求学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分法)进行分门别类,其中上面括号中的类别为 ...
简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果
页面样式如下: html: <li><div class="nav-tab">技术分析</div><ul class="nav- ...
HTML5+CSS设计导航栏及其子菜单
HTML界面设计新建一个web项目,在<body></body>标签中创建一个<div></div>,指定class属性="header&q ...
利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变
目录前端页面部分 js代码部分左侧导航栏组菜单项的打开与关闭 url地址跳转地址栏url地址处理 ajax实现右边页面内容变换内容面板上Bootstrap 面包屑导航前端页面部分 <a ...
【纯html+css垂直导航栏代码】
纯html+css垂直导航栏代码 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...

html+css 实现导航栏二级菜单——气泡框

页面效果展示：

代码实现：

html+css 实现导航栏二级菜单——气泡框相关推荐

最新文章

热门文章