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>
相关推荐
快乐就好ya6 分钟前
React基础到进阶
前端·javascript·react.js
小龙在山东12 分钟前
VS Code 使用 Chrome DevTools MCP 实现浏览器自动化
前端·自动化·chrome devtools
悠哉摸鱼大王13 分钟前
多模态场景下tts功能实现
前端·javascript
东华帝君16 分钟前
__proto__对比prototype
前端
夜晓码农20 分钟前
VSCode Web版本安装
前端·ide·vscode
初出茅庐的33 分钟前
hooks&&状态管理&&业务管理
前端·javascript·vue.js
aricvvang36 分钟前
一行 Promise.all 争议:数据库查询并行真的没用?我和同事吵赢了!!!
javascript·后端·node.js
三掌柜66637 分钟前
2025三掌柜赠书活动第三十五期 AI辅助React Web应用开发实践:基于React 19和GitHub Copilot
前端·人工智能·react.js
YH丶浩38 分钟前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
阿民_armin38 分钟前
Canvas 冷暖色分析工具
前端·javascript·vue.js