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

原文网址: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>

结果

相关推荐
一枚前端小能手2 分钟前
🌐 HTML DOM API全攻略(下篇)- 高级接口与现代Web开发实践
前端·javascript·html
IT_陈寒3 分钟前
React性能翻倍!3个90%开发者不知道的Hooks优化技巧 🚀
前端·人工智能·后端
CC码码6 分钟前
前端2D地图和3D场景中的坐标系
前端·3d·js
慧一居士13 分钟前
Vue 中 <keep-alive> 功能介绍,使用场景,完整使用示例演示
前端·vue.js
xixixin_16 分钟前
【React】节流会在react内失效??
开发语言·前端·javascript·react
I like Code?17 分钟前
Ant Design Landing模版使用教程-react-npm
前端·react.js·npm
光影少年19 分钟前
React Navite 第二章
前端·react native·react.js·前端框架
晴殇i20 分钟前
解锁Web Workers:解决90%前端性能瓶颈的利器
前端·javascript·vue.js
@PHARAOH20 分钟前
HOW - React 状态模块化管理和按需加载(二)- 不同状态库哲学
前端·react.js·前端框架
路光.22 分钟前
React中Suspense的分包实践
前端·react.js·typescript