Advanced drop down menu not aligning to middle of page - html

Question

Basically i have a dropdown menu that is not aligning to the middle of the page as you can see below... It is very annoying because i have tried everything i know possible. I would like to keep it in HTML and CSS please as this part i am not using JavaScript or JQuery to do.
CSS Code:
<style type="text/css">
/* TOP MENU DROP DOWN */
#menu li {
color: #222222;
}
#mega {
list-style:none;
font-weight:bold;
}
#mega li {
float:left;
clear:right;
padding-left: 15px;
}
#mega li div div {
float:none;
clear:both;
}
#mega li:hover {
border-bottom:0;
z-index:1;
position:center;
}
#mega a {
color:#000;
text-decoration:none;
}
#mega a:hover {
color:#077fcc;
}
#mega div {
left:-999em;
}
#mega li:hover div {
position:center;
display:block;
left:0;
}
a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}
.popup {
position:fixed;
width:100%;
height:300px;
text-align:center;
vertical-align:middle;
background-image:url(img/dropdownbg.gif);
background-repeat:no-repeat;
background-position:center;
}
.popup-mid {
text-align:left;
position:center;
height:100%;
width:950px;
}
/* TOP INSIDE*/
#top-dropbg {
width:100%;
height:300px;
}
.drop-box {
margin:30px 15px;
height:240px;
}
.drop-sec1 {
float:left;
clear:right;
height:240px;
width:70%;
}
.drop-sec1-1 {
width:100%;
height:20px;
}
.drop-sec1-2 {
float:left;
clear:right;
width:25%;
height:95px;
}
.drop-sec1-3 {
width:100%;
height:5px;
float:left;
clear:left;
border-bottom:1px dotted #CCC;
}
.drop-sec2 {
float:left;
clear:right;
height:240px;
width:1%;
margin-right:1%;
border-right:1px solid #CCC;
}
.drop-sec3 {
float:left;
clear:right;
height:240px;
width:25%;
}
/* END TOP MENU */
h1 {
color:#858585;
font-size:14px;
}
h2{
color:#333333;
font-size:24px;
}
p {
color:#333333;
font-size:14px;
}
</style>
HTML Code:
<div class="navtop">
<div id="menu">
<ul id="mega">
<li>Bookings
<div class="popup">
<div class="popup-mid">
<span id="top-dropbg">
<span class="drop-box">
<span class="drop-sec1">
<span class="drop-sec1-1"><h2>Our Services</h2></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-3"></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
</span>
<span class="drop-sec2">
</span>
<span class="drop-sec3">
<span class="drop-sec3-1"><h1>Membership and Reward Schemes</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue lacinia dui.</p></span>
</span>
</span>
</span>
</div>
</div>
</li>
<li>Explore Our Fleet
<div class="popup">
<div class="popup-mid">
2
</div>
</div>
</li>
<li>Rental Locator
<div class="popup">
<div class="popup-mid">
3
</div>
</div>
</li>
<li>Services
<div class="popup">
<div class="popup-mid">
4
</div>
</div>
</li>
<li>Partners
<div class="popup">
<div class="popup-mid">
5
</div>
</div>
</li>
<li>Specials
<div class="popup">
<div class="popup-mid">
6
</div>
</div>
</li>
<li>Bluechip
<div class="popup">
<div class="popup-mid">
7
</div>
</div>
</li>
</ul>
</div>
</div>
Thank you in advance all :)

Answer 1

add in style
body
{
text-align: center; /* !!! */
margin: 0 auto;
padding: 0;
width:100%;
}
and change this
#mega li {
float:left;
clear:right;
padding-left: 15px;
}
to
#mega li {
display:inline;
clear:right;
padding-left: 15px;
}