Question

我努力将我的下拉<ul class="second-level">列表放在中心位置。父<li>有position: relative;，而子<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>

Answer 2

您可以使用transform:translateX();规则来实现它。

请参阅更新的小提琴：https://jsfiddle.net/ut0veyhc/4/

这是css：

.second-level {
  padding: 0;
  -webkit-transform: translateX(-25%);
  -ms-transform: translateX(-25%);
  transform: translateX(-25%);
}

修改的

抱歉，我忘了添加css3前缀 - 我已经用新小提琴更新了链接。

下拉不相对于父母居中

2 个答案: