Позволяя основной навигации простираться через всю оболочку

Question

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% каждый.