css - 让主导航横跨整个包装器

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%。