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>
相关推荐
毕业设计制作和分享6 分钟前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄42 分钟前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf2 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨2 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL2 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1113 小时前
css实现div被图片撑开
前端·css
薛一半3 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾3 小时前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O23 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage3 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js