HTML--最简的二级菜单页面
原文网址：HTML--最简的二级菜单页面-CSDN博客
简介
本文写一个HTML最简的二级菜单页面，这个页面布局是很常用的。
方案
有很多方案，比如：flex、float。本文使用float布局。
代码
<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>结果
