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

1.

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

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

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

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

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

3.

这个是CSS代码:

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/725789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 消息恢复 - 如何在 Android 上检索已删除的短信

最新调查显示,手机每天发送和接收的短信数以亿计,尤其是Android智能手机。但与此同时,Android消息丢失也每天都在发生。因此,如何恢复Android手机上已删除的短信对于那些在设备中保存了一些重要信息的人来说似乎非常重要。 在这里…

手机中常用的传感器

文章目录 重力传感器 Gravity sensor三维坐标 加速度传感器 Accelerometer三维坐标 陀螺仪 Gyroscope三维坐标 磁力传感器 Magnetometer三维坐标 光线传感器 Light Sensor接近传感器 Proximity Sensor其他传感器协同工作相机自动调整 传感器有唤醒和非唤醒属性 关于重力传感器和…

前端开发报错:Cannot find module ‘@angular-devkit/schematics‘ Require stack:

1、背景 由于近期需要搭建angular ng-zorro-mobile ionic 框架集成项目,但是在开发过程中遇到了报错: Cannot find module angular-devkit/schematics Require stack 2、原因 这里产生的原因是因为我当时遇到另外一个问题,误导我以为是版…

综合对比各家云服务厂商

云服务厂商的综合对比可以从多个维度进行,包括稳定性、操作便捷性、生态、价格以及安全性等。以下是对几家主流云服务厂商的综合对比: 阿里云:阿里云在稳定性、安全性、性价比、产品功能与生态方面都处于较为领先的地位。其拥有全球领先的云…

数字经济的新篇章:Web3的全球影响

随着区块链技术的飞速发展,Web3作为其重要组成部分,正在成为数字经济的新篇章,并在全球范围内展现出巨大的影响力。本文将深入探讨Web3对全球经济的影响,以及它所带来的新机遇和挑战。 1. Web3的定义与特点 Web3是建立在区块链技…

MyBatis和MyBatis-Plus的差别和优缺点

MyBatis和MyBatis-Plus的主要差别在于功能和特性方面。MyBatis是一个优秀的持久层框架,它支持自定义SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis可以使用简单的XML或注解来配置和映射原生信息,将…

【前端】CSS

定义:层叠样式表 Cascading Style Sheets,控制页面的展示效果 1.基本语法规范 选择器 1/n条声明 选择器决定针对谁修改声明决定修改啥声明的属性是键值对,使用 ; 区分键值对,使用 : 区分键和值 2.格式 style标签可放在head标…

android开发学习-内容共享(server+client)

在应用之间共享数据 通过ContentProvider封装数据 ContentProvider使用的Uri语法结构如下: content://authority/data_path/id content:通用前缀,表示该uri用于ContentProvider定位资源 authority:是授权者名称,用…

【Python--读获取目录下所有csv文件中的均值与偏态】

🚀 作者 :“码上有前” 🚀 文章简介 :Python 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 python练习题 读获取目录下所有csv文件中的均值与偏态按照均值和偏态最大值进行排序完整代码 读获取目录下…

基于OpenCV的图形分析辨认03

目录 一、前言 二、实验目的 三、实验内容 四、实验过程 一、前言 编程语言:Python,编程软件:vscode或pycharm,必备的第三方库:OpenCV,numpy,matplotlib,os等等。 关于OpenCV&…

LeetCode.2917. 找出数组中的 K-or 值

题目 2917. 找出数组中的 K-or 值 分析 这道题其实是要我们求第i位二进制为1的元素个数至少为k,把符合条件的2^i全部加到一起。 因此,我们的思路就是枚举数组的每一位,并且进行以下两个步骤: 统计所有元素第i位1的个数cnt。…

ubuntu 中进入python 编辑如何退出到命令行

文章目录 在Python解释器(交互式命令行)中,你可以使用 exit()函数或 CtrlD(在Unix/Linux/macOS上)或 CtrlZ然后输入 Enter(在Windows上)来退出Python解释器并返回到命令行。 以下是具体的步骤&a…

SpringSecurity配置MD5加密方式

目录 一、需求 二、代码实现 2.1、MD5加密工具类 2.2、实现MD5加密

【论文阅读】DeepLab:语义图像分割与深度卷积网络,自然卷积,和完全连接的crf

【论文阅读】DeepLab:语义图像分割与深度卷积网络,自然卷积,和完全连接的crf 文章目录 【论文阅读】DeepLab:语义图像分割与深度卷积网络,自然卷积,和完全连接的crf一、介绍二、联系工作三、方法3.1 整体结构3.2 使用空间金字塔池…

弹性地基梁matlab有限元编程 | 双排桩支护结构 | Matlab源码 | 理论文本

专栏导读 作者简介:工学博士,高级工程师,专注于工业软件算法研究本文已收录于专栏:《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现,并提供所有案例完整源码;2.单元…

mysql bug( InnoDB: Error number 22),表突然不能读取

mysql bug( InnoDB: Error number 22),表突然不能读取 bug最开始的bug:表突然不能读取关闭mysql容器,再次重启失败 解决方案不重建容器的几种可能措施重建容器重建如果懒得打命令或者忘记命令可能的run bug&#xff1a…

【目标检测】旋转目标检测DOTA格式转YOLO格式标注

准备DOTA格式数据集: dota_dataset -- images |----- train |----- val -- labels |----- train |----- train_original |----- val |----- val_original 修改class_mapping和图片格式: ultralytics/data/converter.py convert_dota_to_yolo_obb() 转换标…

从零学算法128

128.给定一个未排序的整数数组 nums ,找出数字连续的最长序列(不要求序列元素在原数组中连续)的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1: 输入:nums [100,4,200,1,3,2] 输出:4…

打破界限,释放创新:一键将HTML转化为PDF

在互联网时代,HTML作为网页的标准语言,承载着无数的信息与创意。然而,有时我们需要将这些在线内容转化为可打印、可分享的PDF格式。这时,一款高效、便捷的转换工具就显得尤为重要。 首先,我们要进入首助编辑高手主页面…

API分享:淘宝拍立淘API接口|按图搜索商品列表API|电商爆品搜索API

今天来跟大家分享一个非常有用的API,以图搜索商品列表API:item_search_img。通过此API可以实现传入一个图片链接,来获取到该图片上的商品信息,商品列表,支持翻页展示。 item_search_img-按图搜索淘宝商品(…