将子链接放在父级之外

Question

假设我有一个下拉菜单，我想知道是否可以将菜单本身及其子链接定位为固​​定宽度，以便在主链接更多时子链接的宽度不会改变？

我相信这会更好地解释它：

fiddle - 不是一个有效的，但为了解释。

.menu {
position: relative;
margin-left: auto;
margin-right: auto;
width: 250px;
background-color: #edf7f5;
}
.menu li {
    display: inline-block;
    font-family: sans-serif;
    text-transform: uppercase;
    color: blue;
}

.menu li:nth-child(2) ul {
    display: none;
}

    .menu li:nth-child(2) ul li {
        padding-right: 10px;
    }

.menu li:nth-child(2):hover ul {
    position: absolute;
    left: 0;
    top: 30px;
    display: inline-block;
    width: 500px;
}

Answer 1

将position:relative;添加到父级，将left: -50%;添加到子级ul，例如

.menu li:nth-child(2):hover ul {
    position: absolute;
    left: -50%;
    bottom: -40px;
    display: inline-block;
    width: 500px;
    height:40px;
}

确保底部的高度和位置相同

DEMO