我怎樣才能使全寬下拉響應菜單

Question

我不知何故未能來管理此菜單全寬 這是我codepen http://codepen.io/anon/pen/xwDcb

我想我的下拉菜單的寬度是100％由左到對。我在做什麼錯

body { 
background-color:#000; 
} 
.toggleMenu { 
display: none; 
background: #666; 
padding: 10px 15px; 
color: #fff; 
text-transform: uppercase; 
font-weight: bold; 
width:100%; 
} 
.nav-full { 
background:url(../images/nav-bg.png) no-repeat 0 0; 
} 
.nav-centre { 
width:960px; 
margin:0 auto 
} 
.nav { 
list-style: none; 
*zoom: 1; 
} 
.nav:before, .nav:after { 
content:" "; 
display: table; 
} 
.nav:after { 
clear: both 
} 
.nav ul { 
list-style: none; 
} 

我的HTML代碼

<a class="toggleMenu" href="#">Menu</a> 

<div class="nav-full"> 
<div class="nav-centre"> 
    <ul class="nav"> 
     <li><a href="index.html" class="active">HOME</a> 

      <ul> 
       <li><a href="#jquery-pagescroller-2">Indus Advantage</a> 
       </li> 
       <li><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a> 
       </li> 
       <li><a href="#jquery-pagescroller-4">Pipeline</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">Products</a> 

      <ul> 
       <li><a href="#">Overview</a> 
       </li> 
       <li><a href="#">Exercise Physiology</a> 
       </li> 
       <li><a href="#">Manufacturing & Quality Control</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">Patents & Publications</a> 

      <ul> 
       <li><a href="#jquery-pagescroller-0">Global Patenting Strategy</a> 
       </li> 
       <li><a href="#jquery-pagescroller-1">Publications</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">Partnering</a> 

      <ul> 
       <li><a href="#jquery-pagescroller-0">Enquiries - Product</a> 
       </li> 
       <li><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">About Us</a> 

      <ul> 
       <li><a href="#jquery-pagescroller-0">Vision & Values</a> 
       </li> 
       <li><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">Contact Us</a> 

     </li> 
     <li> <a href="#">Careers</a> 
     </li> 
    </ul> 
</div> 
</div> 

Answer 1

你必須給導航中心級100％，目前其在975px或類似的東西，它wrapps您的列表元素。所以無序列表的100％是相對於nav-center元素的。

如果你想獲得導航菜單居中導航中心類位置：relative; 左：50％，餘量：左-511px。 （空白左邊應該是無序列表的寬度）

我認爲最好的解決方案是將下拉菜單放在navi的ul外面。 所以它不相對於其他名單。

標記的HTML這樣的：

<a class="toggleMenu" href="#">Menu</a> 

<div class="nav-full"> 
    <div class="nav-centre"> 
     <ul class="nav"> 
      <li><a href="index.html" class="active">HOME</a></li> 
      <li> <a href="#">Products</a></li> 
      <li> <a href="#">Patents & Publications</a></li> 
      <li> <a href="#">Partnering</a></li> 
      <li> <a href="#">About Us</a></li> 
      <li> <a href="#">Contact Us</a></li> 
      <li> <a href="#">Careers</a> </li> 
     </ul> 

     <ul> 
      <li class="under"><a href="#jquery-pagescroller-2">Indus Advantage</a></li> 
      <li class="under"><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a></li> 
      <li class="under"><a href="#jquery-pagescroller-4">Pipeline</a> 
     </ul> 
     <ul> 
      <li class="under"><a href="#">Overview</a></li> 
      <li class="under"><a href="#">Exercise Physiology</a></li> 
      <li class="under"><a href="#">Manufacturing & Quality Control</a></li> 
     </ul> 
     <ul> 
      <li class="under"><a href="#jquery-pagescroller-0">Global Patenting Strategy</a></li> 
      <li class="under"><a href="#jquery-pagescroller-1">Publications</a></li> 
     </ul> 
     <ul> 
      <li class="under"><a href="#jquery-pagescroller-0">Enquiries - Product</a></li> 
      <li class="under"><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a></li> 
     </ul> 
     <ul> 
      <li class="under"><a href="#jquery-pagescroller-0">Vision & Values</a></li> 
      <li class="under"><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a></li> 
     </ul> 

    </div> 
</div> 

現在你只需要給li.under的位置是：絕對的，剩下的，怎樣的風格，應該是明確的。

Answer 2

檢查與此代碼

<style> 
#nav { 
    height: 1; 
    list-style-type: none; 
    padding-top: 1.25em; 
    margin-top: 0em; 
} 

#nav > li { /* Added ">" */ 
    float: right; 
    position: relative; 
    padding: 0; 
} 

#nav li a { 
    display: inline-block; /* was block */ 
    font-size: 14px; 
    padding: 0 1em; 
    margin-bottom: 1em; 
    color: #333; 
    text-decoration: none; 
    border-left: 1px solid #333; 
} 

#nav .last, #nav li ul li a { 
    border-left: none; 
} 

#nav li a:hover, #nav li a:focus { 
    color: #666; 
} 

#nav li ul { 
    opacity: 0; 
    /*position: absolute; 
    right: 0em; */ 
    list-style-type: none; 
    padding: 0; margin: 0; 
} 

#nav li:hover ul { 
    opacity: 1; 
} 

#nav li ul li { 
    /*float: none; 
    position: static; 
    width: auto;*/ 
    height: 0; 
    line-height: 0; 
    background: none; 
    text-align: left; 
    margin-bottom: .75em; 
} 

#nav li:hover ul li { 
    height: 25px; 
    line-height: 2.5em; 
}</style> 
<ul id="nav"> 
<a class="toggleMenu" href="#">Menu</a> 

<div class="nav-full"> 
<div class="nav-centre"> 
    <ul class="nav"> 
     <li><a href="index.html" class="active">HOME</a> 

      <ul> 
       <li><a href="#jquery-pagescroller-2">Indus Advantage</a> 
       </li> 
       <li><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a> 
       </li> 
       <li><a href="#jquery-pagescroller-4">Pipeline</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">Products</a> 

      <ul> 
       <li><a href="#">Overview</a> 
       </li> 
       <li><a href="#">Exercise Physiology</a> 
       </li> 
       <li><a href="#">Manufacturing & Quality Control</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">Patents & Publications</a> 

      <ul> 
       <li><a href="#jquery-pagescroller-0">Global Patenting Strategy</a> 
       </li> 
       <li><a href="#jquery-pagescroller-1">Publications</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">Partnering</a> 

      <ul> 
       <li><a href="#jquery-pagescroller-0">Enquiries - Product</a> 
       </li> 
       <li><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">About Us</a> 

      <ul> 
       <li><a href="#jquery-pagescroller-0">Vision & Values</a> 
       </li> 
       <li><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">Contact Us</a> 

     </li> 
     <li> <a href="#">Careers</a> 
     </li> 
    </ul> 
    </ul> 
</div> 
</div>