javascript - 为什么我不能将导航栏居中？

Question

我正在使用 jQuery 创建一个下拉导航菜单，它工作正常，但我无法让它在我的页面上居中。

我曾尝试在 div“菜单”中使用 align="center"，但这没有用。然后我尝试使用 div、lis 和 uls 的 css 对齐它，但这也没有用。

这是我的代码

jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
    $(document).ready(function () {
        $("#menu li").hover(function () {
            $(this).children(":hidden").slideDown();

            }, function(){

            $(this).parent().find("ul").slideUp();

        });

    });
</script>

HTML:

<div id="menu">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">test</a>
            <ul>
                <li><a href="#">drop1</a></li>
                <li><a href="#">drop2</a></li>
                <li><a href="#">drop3</a></li>
            </ul>
        </li>
        <li><a href="#">test</a>
            <ul>
                <li><a href="#">drop1</a></li>
                <li><a href="#">drop2</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS:

#menu {
    height: 30px;
    background-color: #26C7FF;
    margin-left: 0;
    margin-right: 0;
}

#menu li li:hover {
    background-color: yellow;
    cursor: pointer;
}

#menu ul, #menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#menu li {
    float: left;
    width: 120px;
    list-style-type: none;
    line-height: 30px;
    text-align: center;
}

#menu li ul {
    position: absolute;
    background-color: #26C7FF;
    display: none;
}

#menu li li {
    float: none;
    padding: 2px;
}

#menu a {
    color: #000;
    text-decoration: none;
}

Answer 1

使用显示:内联 block ；而不是 float li 元素然后使用 text-align:center;对于容器 ul。

#menu > ul > li {
   display: inline-block;
}

这是一个工作示例: http://codepen.io/taneleero/pen/MwojLV