2023-09-05T16:58:08.png

<html>

<head>
    <title>鼠标悬停显示/隐藏菜单</title>
    <style>
        .container {
          display: flex;
          align-items: flex-start;
        }
        
        .subnav {
          width: 200px;
        }
        
        .subnav-menu {
          display: none;
        }
        
        .subnav:hover .subnav-menu {
          display: block;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="subnav">
            <button>菜单按钮1</button>
            <ul class="subnav-menu">
                <li>菜单项1</li>
                <li>菜单项2</li>
                <li>菜单项3</li>
            </ul>
        </div>

        <div class="subnav">
            <button>菜单按钮2</button>
            <ul class="subnav-menu">
                <li>菜单项4</li>
                <li>菜单项5</li>
                <li>菜单项6</li>
            </ul>
        </div>
    </div>


</body>
<div id="transmart-crx-shadow-root" style="all: initial;"></div>

</html>