HTML--最简的二级菜单页面

IT利刃出鞘2025-09-12 21:18

原文网址：HTML--最简的二级菜单页面-CSDN博客

简介

本文写一个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>

HTML--最简的二级菜单页面

简介

方案

代码

结果