先進的下拉菜單不對齊頁面中間

Question

基本上我有一個下拉菜單，不對齊頁面中間，你可以看到下面...這是非常討厭，因爲我已經嘗試了一切我知道可能。我想保留在HTML和CSS中，因爲這部分我不使用JavaScript或JQuery來完成。

CSS代碼：

<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代碼：

 <div class="navtop"> 
       <div id="menu"> 
        <ul id="mega"> 
         <li><a href="#">Bookings</a> 
          <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><a href="#">Explore Our Fleet</a> 
          <div class="popup"> 
          <div class="popup-mid"> 
          2 
          </div> 
          </div> 
         </li> 
         <li><a href="#">Rental Locator</a> 
          <div class="popup"> 
          <div class="popup-mid"> 
          3 
          </div> 
          </div> 
         </li> 
         <li><a href="#">Services</a> 
          <div class="popup"> 
          <div class="popup-mid"> 
          4 
          </div> 
          </div> 
         </li> 
         <li><a href="#">Partners</a> 
          <div class="popup"> 
          <div class="popup-mid"> 
          5 
          </div> 
          </div> 
         </li> 
         <li><a href="#">Specials</a> 
          <div class="popup"> 
          <div class="popup-mid"> 
          6 
          </div> 
          </div> 
         </li> 
         <li><a href="#">Bluechip</a> 
          <div class="popup"> 
          <div class="popup-mid"> 
          7 
          </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
     </div> 

預先感謝您所有:)

Answer 1

添加風格

body 
{ 
text-align: center; /* !!! */ 
margin: 0 auto; 
padding: 0; 
width:100%; 
} 

和改變這種

#mega li { 
float:left; 
clear:right; 
padding-left: 15px; 
} 

到

#mega li { 
display:inline; 
clear:right; 
padding-left: 15px; 
}