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

Question

我有一个主导航栏，位于标题右侧，其下拉显示在右下方（首先<li>有position: relative;而<ul>低于它{ {1}}到它），它看起来像附加的照片。

问题是我希望该下拉菜单拉伸1100px（下面是容器的宽度）并向左移动。你可以查看照片，看看我的意思。 我试图完成这个，但我卡住了，不知道还有什么别的办法。将任何其他职位应用于postion: absolute;无济于事，页面搞砸了

有任何建议吗？

CSS

<ul>

HTML

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

Answer 1

问题是列表<ul> <li>有默认样式，如边距和填充。

你缺少的一切是：

* {
    margin:0;padding:0;
}

http://jsfiddle.net/vGtQe/1/

或者您只想将这些默认设置重置为ul li

ul, ul li {
    margin:0;padding:0;
    list-style:none;
}

http://jsfiddle.net/vGtQe/2/

可能你正在寻找类似的东西： http://jsfiddle.net/vGtQe/3/

进行了一些更改，但它可能会对您有所帮助

Answer 2

尝试position: fixed;全宽x

检查这个小提琴：http://jsfiddle.net/jd7qW/