調整兆豐菜單的頁面寬度並居中

Question

我正在嘗試製作一個巨大的菜單，它將是#header的寬度，並且居中居中。標題的最大寬度爲1024px。但是，下拉菜單始終在父li的邊緣開始。我設法用利潤率來破解它，但這不是一個永久的解決方案。爲了解決這個問題，我刪除了邊距。

HTML

<header> 
    <div id="header"> 
     <div class="row"> 
     <div class="medium-3 columns"> 
     <div id="logo"> 
      <a href="#"><img alt="logo" src="http://dummyimage.com/174x114/828282/0011ff.png"/></a> 
     </div> 
     </div> 
     <div class="medium-7 columns"> 
      <ul class="nav clearfix animated"> 
       <li class="border-half"><a href="#">Home</a></li> 
       <li class="border-half"> 
        <a href="#">Series</a> 
        <div class="mega-container1"> 
         <div style="width: 1000px; height: 290px;"></div> 
        </div> 
       </li> 
       <li class="border-half"><a href="#">Members</a> 
        <div class="mega-container2"> 
         <div style="width: 1000px; height: 290px;"></div> 
        </div> 
       </li> 
       <li class="border-half"> 
        <a href="#">About</a> 
        <div class="mega-container3"> 
         <ul style="width: 1000px; height: 290px;"> 
          <li><a href="#">Who We Are</a></li> 
          <li><a href="#">Why We Care</a></li> 
          <li><a href="#">Some other page</a></li> 
          <li><a href="#">How We Work</a></li> 
         </ul> 
        </div> 
       </li> 
       <li class="border-half"><a href="#">Contact Us</a></li> 
      </ul> 
     </div> 
     <div class="medium-2 columns"> 
     </div> 
    </div> 
    </div> 
</header> 

CSS

body {font-size: 16px; background: #cacaca;} 
#wrapper{width: 100%; height: 100%; padding: 0; margin: 0; background: #cacaca;} 
header {width: 100%; max-height: 7.188em; background: #fff; border-bottom: 0.063em solid $header-border; z-index: 1;} 
#header{max-width: 1024px; height: 7.125em; margin: 0 auto; padding: 0; background: #cdecde} 
#logo {max-width: 10.875em; max-height: 7.125em; float: left; background: #eee;} 
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} 
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} 
.nav { 
    background: #cdecde; 
    max-width: 500px; 
    height: 114px; 
} 

.nav li { list-style: none; } 
.nav > li { padding: 0; float: left; position: relative; } 
.nav > li > a { 
    float: left; 
    color: $body-font-color; 
    font-size: $paragraph-font-size; 
    text-decoration: none; 
    line-height: 114px; 
    padding: 0 20px; 
    height: 114px; 
    position: relative; 
    border-left: 1px solid #fff; 
} 
.nav > li:hover > a { background: #F7F7F7; border-left: 1px solid #f1f1f1;} 
.nav > li:first-child > a { } 
.nav > li:last-child > a { border-right: 0;} 
.nav > li:hover > div { display: block; } 

/* Mega Dropdown */ 

.nav > li > div { 
    position: absolute; 
    top: 114px; 
    display: none; 
    background: #F7F7F7; 
    padding: 10px 10px; 
    box-shadow: 0 2px 3px rgba(0,0,0,0.1); 
    overflow: hidden; 
    border-bottom: 4px solid $primary-color; 
    border-left: 1px solid $header-border; 
    border-right: 1px solid $header-border; 
    z-index: 2; 
    max-width: 1024px; 
    height: auto; 
    margin: 0 auto; 
} 

.mega-container1 { 
    left: ; 
} 
.mega-container2 { 
    left: ; 
} 
.mega-container3 { 
    left: ; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.border-half { 
    border-right: 1px solid #F0F0F0; 
    position: relative; 
} 
.border-half:before { 
    border-left: 1px solid #cdecde; 
} 
.border-half:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    height: 50px; 
    top: 0px; 
    right: -1px; 
    border: 1px solid #cdecde; 
} 
.border-half:hover::after { 
    right: -3px; 
} 

這裏是一個要的jsfiddle得到的想法：http://jsfiddle.net/7e3esmpx/

更新1：解釋是有點混亂。

Answer 1

好吧我想我有一個解決您的問題。根據我的理解，您希望隱藏的div在徘徊時出現，並佔用整個屏幕的寬度。那是對的嗎？要做到這一點：

首先將固定位置和左邊距爲0的位置添加到您的導航li div時，他們是徘徊。即：

.nav > li:hover > div { display: block; 
         position: fixed; 
         left: 0} 

更改導航li div上的最大寬度以包含整個屏幕。即：

.nav > li > div { 
position: absolute; 
top: 114px; 
display: none; 
background: #F7F7F7; 
padding: 10px 10px; 
box-shadow: 0 2px 3px rgba(0,0,0,0.1); 
overflow: hidden; 
border-bottom: 4px solid $primary-color; 
border-left: 1px solid $header-border; 
border-right: 1px solid $header-border; 
z-index: 2; 
max-width: 1800px; 
height: auto; 
margin: 0 auto; 
} 

Answer 2

問題是UL有一定的寬度。下拉與UL的尺寸相同，這意味着如果我調整UL，我應該得到相同的寬度。所以任何有類似問題的人，請檢查您的UL。