javascript - 子菜单相对于主菜单的位置

Question

我有这个菜单在主菜单的第一项（顶部）上处于活动状态：

我遇到的问题是，当用户单击中间、第四或最后一个主菜单项时，子菜单现在看起来像这样（摆脱一切）：

另外，主菜单会由客户自己长大，所以会有第六，第七等等……所以我不能只用一个班级来控制现在的项目……

关于如何找到关于此的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将解决您的问题。这是一个如何使用 max-width 来检查子菜单的示例。

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