我怎样才能使全宽下拉响应菜单

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>