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%;
}

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