css aligning listed blocks - html

Question

I am trying to make a navigation menu for a simple html/css site, it uses blocks and unorganized lists to add items to the navigation.
The problem is that I want my navigation to be centered, right now it floats from left to right, is there another way of aligning the listed div other than making it float right? I tried using left:20; but didn't work, here is the code.
As I say, just need that to center slightly to the right, I am making it float to the left so that it organizes the list properly, without it, it'd be a messy list, try it and you'll see what I mean... Thanks for help! :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>Attractions
<ul>
<li>Our Team</li>
<li>Camp Sites</li>
<li>Mission & Vision</li>
<li>Resources</li>
</ul>
</li>
<li>Plan Visit
<ul>
<li>Activities</li>
<li>Parks</li>
<li>Shops</li>
<li>Events</li>
</ul>
</li>
<li>Birthdays
<ul>
<li>Map</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>

Answer 1

This, I think, gives the nicest result:
#nav {
left:40%
position:relative;
}
When using float, be careful using it without a clearfix hack. A float could end up collapsing your entire site. Link for it here, also an explanation: https://www.w3schools.com/howto/howto_css_clearfix.asp