I am trying to center and then stretch my navbar list items to 100% of the navbar. I have tried to add width:100%;, and some other things. Here is the code any help would be appreciated!
[ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]
/* -- 11.0 Primary Navigation -- */
#primary-nav { width: 940px; margin: 0 auto 20px auto; height: 40px; background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), to(#525252));
}
#primary-nav ul { margin: 0; padding: 0 ; list-style: none;line-height: 40px; }
#primary-nav ul a
{
display: block;
position: relative;
font-family:"sans", Times, serif;
font-size: 13px;
}
#primary-nav ul li { float: left; position: relative; }
#primary-nav ul li:hover
{
}
#primary-nav ul ul { position: absolute; top: -9999em; width:180px; /* left offset of submenus need to match (see below) */ }
#primary-nav ul ul li { width: 156px; }
/* Make sub menus appear */
#primary-nav ul li:hover ul,
#primary-nav ul li.sfHover ul { left: 0; top: 40px; /* match top ul list item height */ z-index: 99; }
/* Hide all subs subs (4 levels deep) */
#primary-nav ul li:hover li ul,
#primary-nav ul li.sfHover li ul,
#primary-nav ul li li:hover li ul,
#primary-nav ul li li.sfHover li ul,
#primary-nav ul li li li:hover li ul,
#primary-nav ul li li li.sfHover li ul { top: -9999em; }
/* Displays all subs subs (4 levels deep) */
#primary-nav ul li li:hover ul,
#primary-nav ul li li.sfHover ul,
#primary-nav ul li li li:hover ul,
#primary-nav ul li li li.sfHover ul,
#primary-nav ul li li li li:hover ul,
#primary-nav ul li li li li.sfHover ul { left: 179px; /* match .nav ul width */ top: 0; }
/* Primary Navigation Skin */
#primary-nav ul { font-size: 13px; text-transform: capitalize; }
/* top level skin */
#primary-nav ul li { border-right: 1px solid #fff; }
#primary-nav ul a { padding: 0 12px; color: #333; height: 40px; line-height: 40px; }
#primary-nav ul a:hover,
#primary-nav ul li.sfHover a,
#primary-nav ul li.current-cat a,
#primary-nav ul li.current-menu-item a
{ text-decoration: none; color: #f8f8f8; background: #333; text-shadow: 0 -1px 1px rgba(0,0,0,0.7); -moz-border-radius: 2px 2px 0 0; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; }
/* 2nd level skin */
#primary-nav ul ul { padding: 10px 0 15px 0; background: #333; -moz-border-radius: 0 0 2px 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.5); }
#primary-nav ul ul li { height: 30px; line-height: 30px; border: none; padding: 0 12px; float: none; }
#primary-nav ul ul li a { line-height: 30px; height: 30px; }
#primary-nav ul li.sfHover ul a { color: #ccc; background: url(images/bg-primary-menu-bevel.gif) left top repeat-x; padding: 0 5px; }
#primary-nav ul li.sfHover ul li:first-child a { background: none; }
#primary-nav ul li.sfHover ul a:hover { color: #f8f8f8; }
/* 3rd level onwards */
#primary-nav ul ul ul { padding: 0; -moz-border-radius: 0 2px 2px 0; -webkit-border-bottom-left-radius: 0; -webkit-border-top-right-radius: 2px; }
#primary-nav ul ul li.sfHover, #primary-nav ul ul li.sfHover, #primary-nav ul ul a:focus, #primary-nav ul ul a:hover, #primary-nav ul ul a:active { outline: 0; }
