Question

我在主菜单的第一项（顶部）上显示此菜单：

enter image description here

我遇到的问题是，当用户点击中间，第四个或最后一个主菜单项时，子菜单现在看起来像这样（退出所有内容）：

enter image description here

此外，主菜单会长大由客户端，所以会有第六，第七等...所以我不能只控制一个类的项目现在是 ......

关于如何找到关于此问题的 css / jquery 解决方案的任何想法？试图遵循基于设计的第一张图片。

这是我的标记：

                <ul id="mainmenu" class="clearfix">
                    <li class="active">
                        <a class="arrowdown" href="javascript:void(0)">ANSIEDAD</a>
                        <ul class="sublist">
                            <li>
                                <a href="javascript:void(0)">Política</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">Economía</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">Sociedad</a>
                            </li>
                            <li class="active">
                                <a href="javascript:void(0)">Medios</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">Inmobiliario</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0)">PRETENSIÓN</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">HEDONISMO</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">MATERIALISMO</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">ARROGANCIA</a>
                    </li>
                    <li id="menu_search">
                        <a href="javascript:void(0)"></a>
                    </li>
                </ul>

和CSS：

ul#mainmenu{
    font-family: Georgia, Times, "Times New Roman", serif;
    width: 754px;
    margin: 0 auto;
    li{
        float: left;
        list-style: none;
        background: #999999;
        margin-right: 4px;
        .round_corners();
        width: 140px;
        text-align: center;
        padding: 3px 0px;
        position: relative;
        a{
            text-decoration: none;
            color: #ffffff;
            text-transform: uppercase;
            font-size: 14px;
            &.arrowdown{
                padding-bottom: 10px;
                background: url('../img/sprites.png') no-repeat center -169px;
            }   
        }
        &#menu_search{
            background: url('../img/sprites.png') #000 2px 2px;
            width: 34px;
            height: 28px;
            padding: 0;
            margin-right: 0;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
        }
        &.active{
            background: #000000;
        }
        &:hover{
            background: #000000;
            color: #ffffff;
        }
        ul.sublist{
            position: absolute;
            width: 560px;
            top: 39px;
            left: 40px;
            li{
                float: left;
                margin-right: 5px;
                margin-bottom: 5px;
                width: auto;
                padding: 1px 9px;
                background: #666666;
                a{
                    text-transform: none;
                }
                &.active{
                    background: #000000;
                }
                &:hover{
                    background: #000000;
                    color: #ffffff;
                }
            }
        }
    }
}

Answer 1

尝试给主菜单一个最大宽度。在这种情况下，我假设你希望它的最大宽度为100％。

#mainmenu {
    max-width: 100%;
}

这将不允许主菜单超出页面的宽度。不过，您可能会遇到新的问题。

Answer 2

使用max-width可以解决您的问题。 Here是一个如何使用max-width来控制子菜单的示例。

您可以尝试将子菜单的锚点移动到更集中的位置，而不是将子菜单分成两行。我的2美分。

相对于Mainmenu的子菜单位置

2 个答案: