当前位置: 首页 > news >正文

二级水平导航菜单栏的实现

1.

这个是本人设计的一带一路的二级水平导航栏HTML代码;

这里最后实现的效果是鼠标悬停在导航栏上面,就会显示下面的4个部分页面,这里只是以评论热

点作为例子,其他的类似;

2.首先要设计DIV,然后利用无序列表的知识,在每一个导航栏目里面嵌套一个无序列表

这个嵌套的无序列表就是悬停显示的菜单栏;

3.

这个是CSS代码:

4~6:在没有设置CSS的时候,会竖直显示,这个就是CSS设置改为水平排列;

8~19:这个就是设置参数加上背景和分割线;

20~21:定义子菜单的样式,设置高度以和主菜单进行区分;

24~30:子菜单的初始状态是隐藏,鼠标滑过以后就会显示出来。

http://www.lryc.cn/news/312496.html

相关文章:

  • 在GitLab Python库中,mr.changes()和mr.diffs()的区别
  • JavaScript | 【讨论】微软早在2022年已经停用ie的今天,js开发还需要考虑ie9以下的情况嘛?
  • 网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2022)
  • 英福康INFICON软件真空Tware32中文操作手册
  • UnityAPI的学习——Quaternion类
  • chromedriverUnable to obtain driver for chrome using ,selenium找不到chromedriver
  • 剑指offer面试算法题目,自己总结的
  • 原生IP是什么?如何测试代理是不是原生IP?
  • 1、MQ_介绍、优缺点、类型等
  • Go-gin-example 第三部分 编写一个简单的文件日志系统
  • SQL中如何添加数据
  • 如何更好的理解设计模式之桥接模式
  • 归并排序
  • ELF 1技术贴|在NXP源码基础上适配开发板的按键功能
  • Linux:kubernetes(k8s)pod的基础操作(6)
  • 【Docker】掌握 Docker 镜像操作:从基础到进阶
  • flink重温笔记(十一):Flink 高级 API 开发——flink 四大基石之 Checkpoint(详解存储后端)
  • React富文本编辑器开发(九)位置
  • 一次直播和图像识别技术应用的探索之旅
  • Ubuntu 下使用 Pybind11 实现 C++ 调用 Python 接口的示例
  • docker安装和使用kafka
  • CTP-API开发系列之接口对接准备
  • C++小记 -链表
  • 网络协议学习DAY1
  • vue3中全局变量的定义和获取
  • 1.2 数据模型 数据库系统概论
  • C#中openFileDialog 对话框不在最顶层,TopMost的异常情况
  • 信息安全与阿里云等保三级方案实践总结
  • 嵌入式学习记录——线程
  • 同步服务器操作系统公网仓库到本地 _ 统信UOS _ 麒麟KYLINOS