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>