html - 下拉不相对于父级居中

Question

我正在努力使我的下拉菜单居中 <ul class="second-level">列表。家长<li>有position: relative;和 child <ul>有position: absolute; , 但它仍然没有居中。

这是一个 Fiddle

Answer 1

在你的代码中试试这个

 <style>
        /** Desktop **/
header #desktop-nav {
    padding: 0 0 20px;
}
header #desktop-nav ul li {
    display: inline-block;
    width: 175px;
    font-size: 18px;
    position: relative;
    padding-bottom: 20px;
}
header #desktop-nav ul li:first-child {
    margin: 0;
    padding: 0;
    position: relative;
    top: 13px;
    width: 40px;
    left: -20px;
}


  header #desktop-nav ul li ul.second-level {
        background: transparent;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 36px;
    left: -4em;
    z-index: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
}
header #desktop-nav ul li ul.second-level .arrow-container {
    color: #4c4c4c;
    position: relative;
    top: 6px;
}
header #desktop-nav ul li ul.second-level li {
    padding: 12px 0;
    border-bottom: 1px solid #67676b;
    background: #4c4c4c;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    width: 240px;
}
header #desktop-nav ul li ul.second-level li:last-child {
    border-bottom: 0 solid transparent !important;
}
header #desktop-nav ul li ul.second-level li a {
    display: block;
    font-size: 15px;
    color: #eaeaea;
    border-bottom: 0;
    text-align: center;

}
header #desktop-nav ul li ul.second-level li a > img {
    position: fixed;
    top: 10px;
}
header #desktop-nav ul li ul.second-level li:hover {
    background: #363636;
}
header #desktop-nav ul li ul.second-level li .up-arrow {
    color: #4c4c4c;
    cursor: default;
    font-size: 14px;
    left: 48%;
    position: absolute;
    top: -11px;
}
header #desktop-nav ul li.active a {
    color: #c40009;
    border-bottom: 3px solid #c40009;
    padding-bottom: 8px;
}
header #desktop-nav ul li:hover > .second-level {
    visibility: visible;
    opacity: 1;
}
header #desktop-nav ul li:hover > a {
    color: #c40009;
    border-bottom: 3px solid #c40009;
    color: #c40009;
    padding-bottom: 8px;
}
header #desktop-nav ul li:hover > a.stickyLogo {
    border-bottom: 0;
}
header #desktop-nav a {
    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    transition: color 0.4s;
}

    </style>