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>
相关推荐
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727571 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记2 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼3 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo3 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式