7b2美化-导航二级菜单美化代码
代码 菜单 导航 美化 二级 7b2
2023-06-13 09:13:03 时间
7b2美化-导航二级菜单美化代码
以下代码放入css
样式
/**菜单样式美化代码**/
.has_children .sub-menu {
border-radius: 4px;
}
.top-menu .b2-jt-down {
display: none!important;
}
.top-menu-ul .sub-menu-0 {
border-top: 0;
padding: 15px;
transform: translateY(10px);
transition: all .3s;
}
.top-menu ul li {
}
.top-menu ul li:hover .sub-menu-0 {
transform: translateY(0);
}
.top-menu-ul .sub-menu-0>li {
border-left: 1px solid #ebeef5;
position: relative;
}
.b2-menu-3 .sub-menu-0>li>a {
color: #4c4c4c;
padding: 8px 15px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.b2-menu-3 .sub-menu-0>li:after {
content: '';
position: absolute;
top: 12px;
left: -5px;
width: 3px;
height: 3px;
border-radius: 50%;
background: #fff;
border: 3px solid #3d7eff;
}
.b2-menu-3 .sub-menu-0>li:nth-child(2n+1):after{
border: 3px solid #f1787f;
}
.b2-menu-3 .sub-menu-0>li:nth-child(3n+1):after{
border: 3px solid #61e1b9
}
.b2-menu-3 .sub-menu-0>li>a:hover {
background: #ebeef5;
}
.b2-menu-3 .sub-menu-0 > li:hover > a, .b2-menu-3 .sub-menu-0 a:hover {
color: #333;
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
相关文章
- 7b2美化-导航菜单添加官方图标+图标旋转代码
- python flake8 代码扫描
- 【创作赢红包】【Java AWT 图形界面编程】菜单组件 ② ( 菜单组件示例要点说明 | 菜单组件示例代码 )
- 【Java AWT 图形界面编程】菜单组件 ③ ( PopupMenu 菜单组件实现步骤 | 使用 MouseAdapter 设置事件监听器 | 代码示例 )
- Java执行js代码详解编程语言
- 深入探究Linux下JNI环境:实现Java与本地代码的互操作(linuxjni环境)
- Oracle ORM精解基于对象关系映射的简洁代码实现(oracle ORM详解)
- 鼠标图片振动代码
- Div+Css(+Js)菜单代码及制作工具
- 一个新的CSS菜单代码
- ASP动态级联菜单实现代码
- PHP向右侧拉菜单实现代码,测试使用中
- 实用的多级树形展开菜单效果代码
- 模拟windows平台的上下文菜单效果代码
- Jquery绑定时间实现代码
- 可用于监控mysqlMasterSlave状态的python代码
- jQuery弹性滑动导航菜单实现思路及代码
- jsp+javascript打造级连菜单的实例代码
- android在连拍菜单中增加连拍张数选项功能实现代码
- 用jquery生成二级菜单的实例代码
- js下拉框二级关联菜单效果代码具体实现
- 优先队列(priority_queue)的C语言实现代码
- php上传文件,创建递归目录的实例代码
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- 一个js控制的导航菜单实例代码
- JQuery以JSON方式提交数据到服务端示例代码
- JS取得绝对路径的实现代码