how to stretch a navigation so it takes over the whole div

Question

I have a nav div with following properties:

#nav {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

but when I put in a navigation bar in it ..it is not stretching for the whole width of 960px

link: here

Answer 1

Add this rule to your stylesheet:

.sf-menu { width: 100%; }

That will make your ul tag take the full width of your #nav div. I'm not sure if this is exactly what you're looking for, or if you want each li to take the full width.

If you want each li element to be evenly stretched across the full width, in your case with 4 elements you can simply set the width of them to 25%. For variable amount of li tags, I'd have to think about it some more...

.sf-menu li { width: 25%; }

Answer 2

Add these rules to your stylesheet:

#nav > ul {width: 100%;}
#nav > ul > li {width: 25%;}