Question

The CSS for this page is below:

#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; }

How can I make the navigation buttons stretch across the whole outer wrapper where it says “media, community, etc..”?

Answer 1

Just set the width of your #main_nav ul div to 100% and set your list menu items, #main_nav ul li, to expand equally, so 100/8 = 12.5% each.