jquery - 将下拉菜单定位在父级的另一侧

Question

我有一个位于标题右侧的主导航栏，它的下拉菜单出现在它的正下方(第一个 <li> 有 position: relative; 和 <ul> 在它下面是 postion: absolute;)，它看起来像附加的照片。

问题是我希望下拉菜单拉伸(stretch) 1100 像素(这是下面容器的宽度)并向左移动。您可以查看照片以了解我的意思。我试图做到这一点，但我卡住了，不知道还能做什么。将任何其他位置应用于 <ul>没有帮助，页面变得困惑

有什么建议吗？

CSS

.sf-menu li {
    float:left;
    position:relative;
}

#SideCategoryList li ul, #SideCategoryList .sf-menu li ul {
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 41px;
    width: 1100px;
    z-index: 99;
}

HTML

<div class="SideCategoryListFlyout">

    <ul class="sf-menu sf-vertical sf-js-enabled">

        <li>
            <a href="#" class="sf-with-ul">Menu Link 1<span class="sf-sub-indicator">»</span></a>
            <ul>
                <li><a href="#">Link 1</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Link 2</a></li>
        <li><a href="#">Menu Link 3</a></li>
    </ul>

</div>

Answer 1

尝试将position: fixed;放在全宽ul上

检查这个 fiddle :http://jsfiddle.net/jd7qW/