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

html | 无js二级菜单

1. 效果图

在这里插入图片描述

2. 代码

<meta charset="utf-8"><style>
.hiddentitle{display:none;}nav ul{list-style-type: none;background-color: #001f3f;overflow:hidden; /* 父标签加这个,防止有浮动子元素时,该标签失去高度*/margin: 0;padding: 0;border-bottom: 1px solid white;font-size: 1.6em;
}ul > li > ul {font-size: 1em;border:1px solid #bbb;
}nav li{float: left;border-right: 1px solid #bbb;}nav li a{display: inline-block; /* display the list items inline block so the items are vertically displayed */color: white;text-align: center;padding: 14px 16px;text-decoration: none; /* removes the underline that comes with the a tag */
}nav li a:hover{background-color: #39CCCC;
}nav>ul>li>ul{display: none;position: absolute;background-color: #f9f9f9;/*min-width: 160px;z-index: 1;*/
}nav>ul>li>ul li{display: block;float: none;overflow: hidden;
}nav>ul>li>ul li a { /* styling of the links in the submenu */color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;
}nav>ul>li>ul a:hover {background-color: #f1f1f1;
}
nav>ul>li:hover ul {display: block;float: bottom;overflow: hidden;
}
</style>menu without js, test under chrome.<nav><h2 class="hiddentitle">Menu</h2><ul><li><a href="#stats0">Summary Statistics</a></li><li><a href="#plots">Plots2</a><ul><li><a href="#a1">Weighted histogram of read lengths</a></li><li><a href="#a2">Weighted histogram of read lengths after log transformation</a></li><li><a href="#a3">Non weighted histogram of read lengths</a></li><li><a href="#a4">Non weighted histogram of read lengths after log transformation</a></li><li><a href="#a5">Yield by length</a></li></ul></li><li><a href="#function">Function</a></li><li><a href="#logs">Logs2</a><ul><li><a href="#b1">logs1</a></li><li><a href="#b2">log2</a></li></ul></li></ul></nav>a new line. v2.2
<p>
this is a new line 
this is a new line 
this is a new line 
this is a new line 
this is a new line 
this is a new line 
this is a new line 
</p>
http://www.lryc.cn/news/105696.html

相关文章:

  • appium的基本使用
  • Dockerfile构建nginx镜像(编译安装)
  • 手机屏幕视窗机器视觉定位软硬件-康耐德
  • Databend 开源周报第 104 期
  • 用于医学图像分类的双引导的扩散网络
  • 8.2day03 Redis入门+解决员工模块
  • 通过案例实战详解elasticsearch自定义打分function_score的使用
  • SpringBoot第28讲:SpringBoot集成MySQL - MyBatis-Plus方式
  • AI 绘画Stable Diffusion 研究(三)sd模型种类介绍及安装使用详解
  • Docker 命令没有提示信息
  • springboot第33集:nacos图
  • 学习gRPC(一)
  • 【二进制安全】堆漏洞:Double Free原理
  • python之open,打开文件时,遇到解码错误处理方式
  • STM32 CAN通信-CubeMX环境下CAN通信程序的编程与调试经验
  • windows创建不同大小的文件命令
  • Attention Is All You Need
  • 手写线程池 - C++版 - 笔记总结
  • PHP 容器化引发线上 502 错误状态码的修复
  • QT中UDP之UDPsocket通讯
  • 【C语言】10-三大结构之循环结构-1
  • Windows下RocketMQ的启动
  • linux内核升级 docker+k8s更新显卡驱动
  • express学习笔记2 - 三大件概念
  • Steam搬砖蓝海项目
  • 就业并想要长期发展选数字后端还是ic验证?
  • 当服务器域名出现解析错误的问题该怎么办?
  • 面试必考精华版Leetcode2095. 删除链表的中间节点
  • 对 Redis 实现分布式事务的探索与实现
  • Matlab实现Spectral Clustering算法