水平子菜單需要伸展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