如何在菜单列表中实现换行并保留li尺寸与hover缩放效果

当前效果 #

期望效果 #

需求说明 #

需要保留CSS中transform属性实现的hover放大效果，同时实现列表项自动换行。此前尝试设置max-width实现换行时，出现li元素尺寸异常的问题：

现寻求既能保留li元素原有尺寸，又能实现列表项换行的解决方案。

index.html（主页面HTML代码） #

<!DOCTYPE html>
<html>
    <head>
        <title>Chulamis</title>
        <meta charset: "UTF-8" 
        name="viewport" content="width=device-width, initual-scale=1">
        <link rel="stylesheet" type = "text/css" href="css/style.css">
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="center">
                <iframe src="menu.html" frameborder="0" id="iframe_menu"></iframe>
            </div>
            <div id="right"></div>
    </body>
</html>

style.css（主页面CSS代码） #

#container{
    margin: 0px;
    padding: 0px;
}

#left{
    float: left;
    width: 25%;
    height: 1500px;
    background: red;
}
#center{
    float: left;
    width:50%;
    height: 1500px;
}
#right{
    float: right;
    width: 25%;
    height: 1500px;
    background: blue;
}
#iframe_menu{
    width: 100%;
    height: 100%;
}

menu.html（菜单HTML代码） #

<head>  
    <link rel="stylesheet" type = "text/css" href="css/menu.css">
</head>
<body>
    <div id="menu_container">
        <div id="top">
            <ul id="top_menu">
                <li>home</li>
                <li id="empresa">nossa empresa</li>
                <li>lojas</li>
                <li>localização</li>
                <li>contato</li>
            </ul>
        </div>
        <div id="banner"></div>
        <div id="bottom">
            <ul id="bottom_menu">
                <li>produtos</li>
                <li id="loja">loja virtual</li>
                <li>cursos</li>
                <li>serviços</li>
            </ul>
        </div>
    </div>
</body>

menu.css（修改后菜单CSS代码） #

#menu_container{
    margin: 0%;
    padding: 0%;
    height: 1000px;
    width: auto;
}
#top, #bottom{
    background-color: #1b8e99;
    width: 100%;
    height: auto;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 0 8px;
}
#top_menu{
    text-align: right;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#bottom_menu{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
ul li{
    display: inline-block;
    text-transform: uppercase;
    padding: 0 8px;
    line-height: 45px;
    white-space: nowrap;
    cursor: pointer;
}
#top_menu li:hover, #bottom_menu li:hover{
    background-color:#92c9ce;
    transform:scale(1.2);
    transform-origin: center;
}

#banner{
    background-image: url(../img/banner.fw.png);
    width: 100%;
    height: 330px;
}

直接修改menu.css即可实现需求，关键调整如下：

• 容器高度自适应：把#top、#bottom的固定height:45px改为height:auto，避免换行后菜单内容溢出容器。
• Flex布局实现换行：给#top_menu、#bottom_menu添加display: flex; flex-wrap: wrap，同时给#top_menu保留justify-content: flex-end维持右对齐，让列表项在宽度不足时自动换行，且不会破坏li元素的原有尺寸。
• 优化菜单项样式：给li加上white-space: nowrap，防止单个菜单项内的文字折行；hover时的transform: scale(1.2)补充transform-origin: center，让放大效果从元素中心展开，视觉更自然。
• 调整容器内边距：给#top、#bottom加padding: 0 8px，避免菜单项贴紧容器边缘。

这样修改后，既保留了hover放大效果，又实现了列表自动换行，且li元素尺寸完全正常。

内容的提问来源于stack exchange，提问作者Matheus Guedes