让主导航跨越整个包装器

Question

this page的CSS如下：

#main_nav ul, #main_nav ul li, #main_nav ul ul { list-style: none; margin:0; padding: 0; }
#main_nav ul { position: relative; z-index: 597; float: left; font-family:Arial, Helvetica, sans-serif; }
#main_nav ul li {  float: left; line-height: 1.8em; vertical-align: middle; text-transform:uppercase; }
#main_nav ul li.hover, #main_nav ul li:hover { position: relative; z-index: 599; cursor: default; }
#main_nav ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#main_nav ul ul li { float: none; font-size:12px; }
#main_nav ul ul ul { top: 0; left: 99%; }
#main_nav ul li:hover > ul { visibility: visible; display:block; }

如何让导航按钮在整个外包装上拉伸，在其中显示“媒体，社区等......”？

Answer 1

只需将#main_nav ul div的宽度设置为100％，然后将列表菜单项#main_nav ul li设置为均匀展开，即100/8 = 12.5％。