简介
本文写一个HTML最简的二级菜单页面，这个页面布局是很常用的。
方案
有很多方案，比如：flex、float。本文使用float布局。
代码
html
<html xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="anchor,fixed navigation hide anchor">
<title>测试</title>
<style>
.menu {
float: left;
}
ul {
list-style: none;
}
.menu > li {
float: left;
margin: 0 10px;
}
.submenu {
visibility: hidden;
width: max-content;
padding: 0;
}
.menu li:hover .submenu {
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<ul class="menu">
<li>
<a href="#">菜单项1</a>
<ul class="submenu">
<li><a href="#">子菜单项1</a></li>
<li><a href="#">子菜单项2</a></li>
<li><a href="#">子菜单项3</a></li>
</ul>
</li>
<li>
<a href="#">菜单项2</a>
<ul class="submenu">
<li><a href="#">子菜单项4</a></li>
<li><a href="#">子菜单项5</a></li>
<li><a href="#">子菜单项6</a></li>
</ul>
</li>
<li><a href="#">菜单项3</a></li>
</ul>
</div>
</body>
</html>结果
