html | 无js二级菜单

news2024/11/17 19:33:31

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.coloradmin.cn/o/826938.html

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

相关文章

4年测试工程师,常用功能测试点总结,“我“不再走弯路...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 输入框测试 1、字…

模电专题-MOS管的放大电路分析

在实际应用中&#xff0c;我们经常会使用到功率MOS&#xff0c;这时通常不会将它当成一个开关使用&#xff0c;而是当成一个放大器来使用&#xff0c;那这就需要让其工作在放大状态。 参考下图中的mos管的特性曲线&#xff0c;右图中的输出特性曲线中有一根红色的分界线&#x…

2000-2021年上市公司常用控制变量数据(A股)含stata处理代码

2000-2021年上市公司企业A股常用控制变量 1、时间&#xff1a;2000-2021年&#xff08;注&#xff1a;股权性质从2004年开始&#xff0c;第一大股东持股比例从2003年开始&#xff09; 2、来源&#xff1a;整理自csmar 和wind 3、数据范围&#xff1a;A股公司 不包含已退市的…

使用Python动画粒子的薛定谔波函数(ψ)(完整代码)

使用Python动画粒子的薛定谔波函数&#xff08;ψ&#xff09;&#xff08;完整代码&#xff09; 使用曲柄-尼科尔森方法求解盒子中的粒子 Kowshik chilamkurthy 以后 发表于 书技术 4 分钟阅读 2月 2021&#xff0c; <> 1.4K 5 左图&#xff1a;来源&#xff0c;右图…

Leetcode-每日一题【剑指 Offer 56 - II. 数组中数字出现的次数 II】

题目 在一个数组 nums 中除一个数字只出现一次之外&#xff0c;其他数字都出现了三次。请找出那个只出现一次的数字。 示例 1&#xff1a; 输入&#xff1a;nums [3,4,3,3]输出&#xff1a;4 示例 2&#xff1a; 输入&#xff1a;nums [9,1,7,9,7,9,7]输出&#xff1a;1 限制…

网工必须掌握的5种组网技术,你会了吗?

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 目录 一、VLAN技术 1、VLAN是什么&#xff1f; 2、VLAN的作用 ①提高网络安全性 ②提高了网络的灵活性性 ③增强了网络的健壮性 二、D…

SPDK的块设备抽象层,从一个简单的示例程序讲起

最早的SPDK仅仅是一个NVMe驱动,但现在的SPDK已经不是原来的SPDK了,其功能涵盖了整个存储栈。为了能够实现丰富的功能,SPDK实现了一个块设备抽象层,其功能与Linux内核的块设备层类似,这个块设备抽象层称为BDEV。 块设备抽象层BDEV在整个SPDK栈中的位置如图所示,它位于中间…

解决一个Yarn异常:Alerts for Timeline service 2.0 Reader

【背景】 环境是用Ambari搭建的大数据环境&#xff0c;版本是2.7.3&#xff0c;Hdp是3.1.0&#xff1b;我们用这一套组件搭建了好几个环境&#xff0c;都有这个异常告警&#xff0c;但hive、spark都运行正常&#xff0c;可以正常使用&#xff0c;所以也一直没有去费时间解决这…

Linux lvs负载均衡

LVS 介绍&#xff1a; Linux Virtual Server&#xff08;LVS&#xff09;是一个基于Linux内核的开源软件项目&#xff0c;用于构建高性能、高可用性的服务器群集。LVS通过将客户端请求分发到一组后端服务器上的不同节点来实现负载均衡&#xff0c;从而提高系统的可扩展性和可…

读磁盘概述

磁盘结构 磁道C 磁头H 扇区S 一个磁盘有很多个盘面&#xff0c;上面是其中一个盘面&#xff0c;每个盘面对应一个磁头。 磁盘的最小单元是扇区&#xff0c;通过CHS可以定位到一个确定的扇区&#xff0c;每个扇区一般是512个字节。 CHS寻道方式 设置好寄存器的值&#xff0c;然…

ElasticSearch可视化管理工具之ElasticHD

推荐的五种客户端 1.Elasticsearch-Head &#xff0c; Elasticsearch-Head 插件在5.x版本之后已不再维护&#xff0c;界面比较老旧。 2.cerebro 据传该插件不支持ES中5.x以上版本。 3.kinaba 功能强大&#xff0c;但操作复杂&#xff0c;以后可以考虑。 4.Dejavu 也是一个 Elas…

Balanced Multimodal Learning via On-the-fly Gradient Modulation

摘要 多模态学习通过整合不同的感官&#xff0c;有助于全面理解世界。因此&#xff0c;多种输入模式有望提高模型的性能&#xff0c;但我们实际上发现&#xff0c;即使多模态模型优于其单模态模型&#xff0c;它们也没有得到充分利用。具体地说&#xff0c;在本文中&#xff0…

xilinx noc路由 axi smartconnect

s00先看勾选了谁&#xff0c;可以勾选多个master 口&#xff0c;然后看address命中那个&#xff1b; 最终只能去其中一个 如果没有勾选&#xff0c;即使地址命中也不能过去&#xff1b; smartconnect 替换了interconnect了&#xff1b; 路由是看address editor中的addr去路由&…

v-for为什么要设置key值及为什么不建议使用index作为key

为什么要设置key值 提高diff算法的效率,可以更加快捷找出变化和新增的元素&#xff0c;更高效的更新虚拟DOM&#xff08;key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。&#xff09; 为什么不建议使用index作为key 以下面代码为例&…

思维导图在问题解决中的应用:分析问题、找出解决方案的思维导图

思维导图是一种可视化思维工具&#xff0c;他结构化的的图形方式&#xff0c;可以帮助我们快速捕捉关键信息。避免信息的冗杂。 如今思维导图已经运用于生活以及我们工作的各个领域。不限于教育、项目管理、商业、金融、法律等行业。它分支结构的方式&#xff0c;将中心思想置于…

2023年华数杯数学建模

一、比赛背景 为了培养学生的创新意识及运用数学方法和计算机技术解决实际问题的能力&#xff0c;中国未来研究会大数据与数学模型专业委员会、天津市未来与预测科学研究会大数据分会决定举办华数杯全国大学生数学建模竞赛。竞赛的目标是为培养大学生的科学精神及运用数学解决实…

Java期末复习题库(刷题)

本学期讲java课&#xff0c;进程截止到IO流线程那部分 有题库当然用题库了 顺手自己写一下代码复习一下 关于内存那些事 Java 内存结构 一个知识点&#xff1a;java.lang包下的类都可以直接用不用导入&#xff08;import&#xff09;包 判断题 判断题凡是 x&#xff08;√…

安全防护,保障企业图文档安全的有效方法

随着企业现在数据量的不断增加和数据泄露事件的频发&#xff0c;图文档的安全性成为了企业必须高度关注的问题。传统的纸质文件存储方式已不适应现代企业的需求&#xff0c;而在线图文档管理成为了更加安全可靠的数字化解决方案。那么在在线图文档管理中&#xff0c;如何采取有…

【JAVA】String ,StringBuffer 和 StringBuilder 三者有何联系?

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言StringBufferStringBuffer方法 StringBuilderStringBuilder方法 String &#xff0c;StringBuffer 和 StringBuilder的区别String和StringBuffer互相转换 前言 在之前的文章…

【数据结构】实现单链表的增删查

目录 1.定义接口2.无头单链表实现接口2.1 头插addFirst2.2 尾插add2.3 删除元素remove2.4 修改元素set2.5 获取元素get 3.带头单链表实现接口3.1 头插addFirst3.2 尾插add3.3 删除元素remove3.4 判断是否包含元素element 1.定义接口 public interface SeqList<E>{//默认…