Html 将水平菜单与子菜单居中

我发现了一个简单的水平css菜单，我认为它很容易操作

按照当前css的编写方式，菜单是左对齐的。我希望ul在div内居中，同时保持li的左对齐。我花了几个小时试图弄明白这一点，我也在这个网站上浏览了类似的帖子。我希望有一个简单的解决办法。谢谢你的帮助

这是我的html：

<div id="horizontal_menu">
    <ul class="drop_menu">
    <li><a href="#" title="home" class="">Home</a></li>
    <li><a href="#" title="surnames" class="">Surnames</a></li>
    <li><a href="#" title="vital records" class="">Vital Records</a>
        <ul>
            <li><a href="#" title="Birth" class="">Birth</a></li>
            <li><a href="#" title="Marriage" class="">Marriage</a></li>
            <li><a href="#" title="Divorce" class="">Divorce</a></li>
            <li><a href="#" title="Death" class="">Death</a></li>
            <li><a href="#" title="Obiturary" class="">Obiturary</a></li>
            <li><a href="#" title="Land" class="">Land</a></li>
            <li><a href="#" title="Church" class="">Church</a></li>
            <li><a href="#" title="Military" class="">Military</a></li>
            <li><a href="#" title="Adoptions" class="">Adoptions</a></li>
            <li><a href="#" title="Education" class="">Education</a></li>
            <li><a href="#" title="Medical" class="">Medical</a></li>
            <li><a href="#" title="Newspapers" class="" >Newspapers</a></li>
        </ul></li>
    <li><a href="#" title="Photo Album" class="">Album</a></li>
    <li><a href="#" title="Relatives" class="">Relatives</a>
        <ul>
            <li><a href="#" title="Ancestors" >Ancestors</a></li>
            <li><a href="#" title="Descendants" >Descendants</a></li>
            <li><a href="#" title="Memorial" >Memorial</a></li>
        </ul></li>
    <li><a href="#" title="Sources" class="">Sources</a></li>
    <li><a href="#" title="Timeline" class="">Timeline</a></li>
    <li><a href="#" title="Index" class="">Index</a></li>

    </ul>

 </div>

---

CSS的几个简单调整可以实现这一点：

.drop_menu {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
    text-align: center;
}
.drop_menu > li { display: inline-block; }
.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#fff;
    text-decoration:none;
    font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
    text-align: left;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}

---

你可以用这个来证明lis的正确性

这有点像黑客，但效果很好。尝试将ul置于水平菜单div的中心位置

编辑： 我看到你的结构比我想象的要复杂。 检查它工作得很好。您可以使用此CSS。

文本对齐：居中

代码如下：

我建议您清理CSS，使用类也不错，这样您就可以轻松地在样式表中找到正确的元素。我删除了一些代码，因为它与您想要完成的任务无关

.drop_menu {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
    text-align: center;
}
.drop_menu > li { display: inline-block; }
.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#fff;
    text-decoration:none;
    font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
    text-align: left;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}

.drop_menu li a {
    padding: 6px 20px 6px 6px;
}

.drop_menu{
    width: 100%;
    float: left;
    clear: left;
    left: 50%;
    position: relative;
}