html - 如何正确扩展到父宽度之外？

Question

我在缺席后再次玩弄 html/css 并且陷入困境。我建立了一个粘性页脚样式的导航栏，并希望子链接是水平的。问题是父容器包含它们的宽度。我可以用负的左/右页边距来克服这个问题，但这需要在子链接的数量或大小发生变化时随时进行更改。我考虑过让它变大，但这似乎是一个草率的作弊，当我进行媒体查询时可能会成为一个问题。

我考虑过将其设置为 position: absolute 和 float，但这些似乎也是错误的选择。

您认为这样做的正确方法是什么？ FIDDLE

nav{
    height: 100px;
    margin-bottom: 50px;
    position: relative;
    width: 100%;
}

nav > ul > li > ul {
    margin: -150px -150px 0 -150px;
    line-height: 50px;
}

我放入了负边距以粗略地了解我正在尝试的内容。

谢谢。

Answer 1

I made some changes to your code. 
What do you think?

https://jsfiddle.net/bpq4vtgy/1/

Ok that's what you need:

nav > ul > li {
    float: left;
    position: relative;
    height: 100px;
    width: 25%;
    text-align: center;    
}

nav > ul > li > ul {
    position: absolute;
    width: 1000px;
    bottom: 100px;
    left: -20px;
    opacity: 0;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -ms-transition: opacity .5s;
}

nav > ul > li > ul > li {
    display: block;
    float: left;
    padding: 0 10px;
    line-height: 50px;
    display: inline-block;
    background-color: #aff;
    border-left: 1px solid #ffffff;
}

nav > ul > li > ul > li:first-child {
    border-left: 0;
}

参见 https://jsfiddle.net/kiroslim/6s57rkyu/1/ !