相对于父母下降不居中

我正在努力将我的下拉列表中心排列在<ul class="second-level">列表中。父母<li>有position: relative;，孩子<ul>有position: absolute;，但它仍然不居中。相对于父母下降不居中

这里有一个Fiddle

来源

2016-05-13 Madness

我认为它与添加宽度到下拉菜单（这是我想要做的）有关。每当我添加一个宽度时，菜单就会消失。 – Madness

试试这个在您的代码

<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>

来源

2016-05-13 09:14:51

用你的代码更新了小提琴，仍然不工作 - https://jsfiddle.net/ut0veyhc/2/ – Madness

使用这个已编辑的答案，它有完整的样式表和复制粘贴它代替原始风格 –

嗯，我把它取代了所有，它仍然不居中。我想让下拉框出现在父母的中间LI – Madness

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

见更新小提琴：https://jsfiddle.net/ut0veyhc/4/

这里的CSS：

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

编辑

对不起，我忘了加上CSS3前缀 - 我已经更新了新的链接小提琴。

来源

2016-05-13 09:34:01 Frits

相对于父母下降不居中

回答

相关问题