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>
相关推荐
前端Hardy16 分钟前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy17 分钟前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙41 分钟前
替代 Object.freeze 的精准只读模式
前端·javascript
web前端1231 小时前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天1 小时前
前端 9大 设计模式
前端
搞个锤子哟1 小时前
网站页面放大缩小带来的问题
前端
hj5914_前端新手1 小时前
React 基础 - useState、useContext/createContext
前端·react.js
半花1 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
霍格沃兹_测试1 小时前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
toooooop81 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket