水平子菜单需要伸展100％

所以我试图实现一个水平子菜单，我发现CodePen导航，但我无法让子菜单拉伸100％的导航换行。如果我给它一个100％的宽度，它将继承父元素的宽度，除非我以像素为单位给它一个宽度，我显然不想这样做。水平子菜单需要伸展100％

我的css有点臃肿，因为我试图将codepen项目合并到我当前的项目中。我已经删除了所有不必要的代码，除了css中的内容以防万一我失去了一些东西。

这大致是我想要实现的。导航保持统一是很重要的。

在此先感谢。

body { 
    background-color:#FFF; 
    font-size: 62.5%; /* 67.5% or 65.7% */ 
} 

#wrapper { 
    width:85%; 
    height:85%; 
    margin: 0 auto 0 auto; 
} 

#nav-wrap { 
    width:100%; 
    height:110px; 
    padding: 0; 
    margin: 0 0 0 0; 
    background-color:#CCC; 
} 

ul li { 
    display:inline-block; 
    margin:0; 
    float:left; 
    position:relative; 
    font-size:2.7em; 
    font-family: 'allgemeineregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    width:14%; 
    min-width:140px !important; 
    height:100%; 
    text-align:center; 
    color: #FFF; 
    line-height:1.1em; 
} 

.orange { 
    width:100%; 
    height:100%; 
    background-color:#f37028; 
} 

.orange p { 
    margin: 0 0 0 0; 
    padding: 0; 
} 

.orange a span /* added when link has more than one word */ { 
    display:block; 
} 

.orange a:link, .orange a:visited { 
    padding:0; 
    color: #FFF; 
    text-decoration:none; 
    text-transform:uppercase; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 

.orange a:hover { 
    text-decoration:none; 
    color:#231f20; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 

li .subnav-orange { 
    display: none; 
    position: absolute; 
    width: 800px; 
    clear: both; 
    margin-left: 0; 
    background-color:#f37028; 
    font-size:0.25em; 
    text-align:left !important; 
} 

.subnav-orange ul li a:link, a:active, a:visited { 
    text-decoration:none; 
} 

.subnav-orange ul li a:hover { 
    color:#000; 
    text-decoration:none; 
} 

li:hover > .subnav-orange { 
display:inline-block; 
left:0;} 

.subnav-orange ul { 
    margin-left: 0; 
    float:left; 
    padding:10px 0; 
    width:100%; 
} 

.subnav-orange ul li { 
    width:14%; 
    margin: 0 10% 0 0 !important; 
} 

<div id="wrapper"> 

    <ul id="nav-wrap"> 

    <li id="link-one"> 

    <div class="orange"><a href="#" class="parent-one-link"><span>Digital</span><span>Printing</span></a></div> 

    <div class="subnav-orange"> 
     <ul> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option2</a></li> 
     <li><a href="#">Option3</a></li> 
     </ul> 
    </div><!-- /.subnav --> 
    </li> 


    </ul> 

    </div> <!-- wrapper -->

来源

2014-02-27 Compton