html - css 对齐列出的 block

Question

我正在尝试为一个简单的 html/css 网站制作一个导航菜单，它使用 block 和无组织的列表将元素添加到导航中。

问题是我希望我的导航居中，现在它从左向右浮动，除了让它向右浮动之外，还有其他对齐列出的 div 的方法吗？我尝试使用 left:20;但没有用，这是代码。

正如我所说，只需要它稍微向右居中，我让它向左浮动，以便它正确地组织列表，没有它，它会是一个困惑的列表，试试吧，你会的明白我的意思...感谢您的帮助! :D

body {  
 font-family: Arial;
}

#nav { /*indexed so I can see it over a content div.*/
 z-index:0; 
}

ul {
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul li {
 float: left; 
 width: 8%; 
 height: 40px; 
 background-color: #000000;
 opacity: 0.8; 
 line-height: 40px; 
 text-align: center; 
 font-size: 90%; 
}

ul li a {
 text-decoration: none; 
 color: white;
 display: block;
}

ul li a:hover {
 background-color: green;
}

ul li ul li{
 display: none;
}

ul li:hover ul li {
 display: block;
 margin-left: 0%;
 width: 100%;
 background-color: #000000;
}

<div id="nav">
<ul>
    <li><a href="#">Attractions</a>
        <ul>
            <li><a href="">Our Team</a></li>
            <li><a href="">Camp Sites</a></li>
            <li><a href="">Mission &amp; Vision</a></li>
            <li><a href="">Resources</a></li>
        </ul>
    </li>
    <li><a href="#">Plan Visit</a>
        <ul>
            <li><a href="">Activities</a></li>
            <li><a href="">Parks</a></li>
            <li><a href="">Shops</a></li>
            <li><a href="">Events</a></li>
        </ul>
    </li>
    <li><a href="#">Birthdays</a>
        <ul>
            <li><a href="">Map</a></li>
            <li><a href="">Directions</a></li>
        </ul>
    </li>
</ul>
</div>

Answer 1

我认为，这给出了最好的结果:

#nav {
    left:40%
    position:relative;
}

使用 float 时，请小心使用它，不要使用 clearfix hack。 float 可能会导致整个网站崩溃。链接在这里，还有一个解释:https://www.w3schools.com/howto/howto_css_clearfix.asp