centering <ul> <li> horizontal下拉菜单

Question

我无法将此水平列表下拉菜单居中。因为我使用的是一个向左浮动，所以我需要重写所有的css吗？

这是与列表位置相关的所有代码。或者点击这里观看现场直播。

.megamenu {
margin:auto;
position:absolute;
margin:0;
width:100%;
font-size:1.182em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
border-right: none;
top: -1px;
list-style-type:none;
list-style-position:inside;




.megamenu > li {

    display:inline;
    border:none;
    margin:0;
    float:left;
    padding: 0px 0 0px 30px;
    -webkit-transition: background-color 0.4s ease-out;
    -moz-transition: background-color 0.4s ease-out;
    -o-transition: background-color 0.4s ease-out;
    -ms-transition: background-color 0.4s ease-out; 
    border-right: none;
    transition: background-color 0.4s ease-out;

}

任何帮助都将不胜感激

Answer 1

有很多不同的方法可以做到这一点-尽管你需要给它一个宽度，而不是100%。这样可以吗？

有了宽度，您就可以在ul上使用display:inline，在父div上使用text-align:center，或者也可以使用margin:auto。

如果这不起作用，请告诉我，我将为您做一个小提琴:)

Answer 2

我在这方面遇到了很多问题，但有一天我终于找到了解决方案。它使用了表格和css自动页边距。这是我的诀窍。只需更改中心td的宽度并添加导航即可。

<table>
<td style="margin:0 auto;">
</td>
<td width="800"> <----Change this to the width of your nav bar.

PUT THE NAVIGATION HERE

</td>
<td style="margin:0 auto;">
</td>
</table>

Answer 3

据我所知，你不应该在内联元素中嵌套块级别的元素。这就是说，我通过简化你的超文本标记语言并用一个无序列表替换包含“内容”的<div>来创建this JSFiddle solution。(理论上，这个子列表只有一个<li>，如果您愿意的话，它应该能够保存包含内容的<div>。)

HTML是这样的：

<ul id="menu">
    <li>Home
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>One day
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>I wish to
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Be in the
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Centre of this page
        <ul>
            <li>Content</li>
        </ul>
    </li>
</ul>​

CSS是这样设置的：

#menu {
    text-align: center;
    height: 30px;
}

#menu li {
    list-style: none;
    display:inline-block;
    margin: 5px 15px;
}

#menu li ul {
    display: none;
}

#menu li:hover ul {
    display: block;
    position: absolute;
    top: 30px; /* height of menu */
    left: 25px;
    right: 25px;
}

在JSFiddle中，我添加了一些颜色，以使元素的位置变得清晰。我还去掉了您的实时示例中的动画CSS，但这应该很容易恢复。

这种方法依赖于给菜单一个绝对高度--在本例中是30px --然后用top: 30px绝对定位悬停在菜单下方的"content“<div> (或者菜单高度是什么)。