css - forcing width of menu items to take up 100%

Question

i have this site:

www.yoursdproperty.com

i need the top menu items HOME, BUYING PROPERTY, SELLING PROPERTY ETC...

to take up 100% of the width of the top bar. if i add more items, i went them to size accordingly.

here is the CSS associated with this menu bar. is there something i can change here to do that?

/* Moo Menus */
#cssmenu_moo_menu
{ padding:0;
  margin:0; }

#cssmenu_moo_menu a
{ float:left;
  text-decoration:none;
  display:block;
  cursor:pointer;
  height:35px;
  font-size:14px;
  font-weight: bold;
  line-height:35px;
  padding:0 15px;
  overflow:hidden;
  border-right:1px solid #0d85c9; }

#cssmenu_moo_menu li li a
{ font-weight:bold;
  font-size:12px;
  border-right:none;
  padding:0; }

#cssmenu_moo_menu ul
{ height:35px;
  float:left;
  list-style:none;
  margin:0; }

#cssmenu_moo_menu
{ background:#006198 url(../images/moomenu.png) repeat-x 50% top;
  height:35px;
  float:left;
  list-style:none;
  margin:0;
  padding:0; }

#cssmenu_moo_menu li li
{ padding:0;
  background:none; }

#cssmenu_moo_menu ul ul a
{ color:#000;
  display:block;
  text-decoration:none;
  width:275px;
  text-transform:none; }

#cssmenu_moo_menu li
{ float:left;
  padding-left:0;
  height:35px;
  background:transparent; }

#cssmenu_moo_menu ul li
{ position:relative; }

#cssmenu_moo_menu li ul
{ z-index:99;
  top:35px;
  position:absolute;
  left:-999em;
  height:auto;
  font-weight:normal;
  margin:0;
  border:0 solid #ddd;
  padding:0; }

#cssmenu_moo_menu ul
{ padding:0;
  margin-top:0; }

#cssmenu_moo_menu li li
{ float:left;
  padding:0;
  margin:0;
  height:35px;
  width:275px; }

#cssmenu_moo_menu li ul ul
{ margin:-25px 0 0 275px; }

#cssmenu_moo_menu li:hover ul ul,#cssmenu_moo_menu li:hover ul ul ul,#cssmenu_moo_menu li:hover ul ul ul ul,#cssmenu_moo_menu li.sfhover ul ul,#cssmenu_moo_menu li.sfhover ul ul ul,#cssmenu_moo_menu li.sfhover ul ul ul ul
{ position:absolute;
  left:-999em; }

#cssmenu_moo_menu li:hover ul,#cssmenu_moo_menu li li:hover ul,#cssmenu_moo_menu li li li:hover ul,#cssmenu_moo_menu li li li li:hover ul,#cssmenu_moo_menu li.sfhover ul,#cssmenu_moo_menu li li.sfhover ul,#cssmenu_moo_menu li li li.sfhover ul,#cssmenu_moo_menu li li li li.sfhover ul
{ position:absolute;
  left:0; }

#cssmenu_moo_menu ul ul
{ width:275px;
  background:#006198; }

#cssmenu_moo_menu ul ul ul
{ width:275px;
  padding-bottom:0; }

#cssmenu_moo_menu ul ul li li
{ border-right:0 solid #000; }

#cssmenu_moo_menu a
{ color:#eee;
  border-left:1px solid #444; }

#cssmenu_moo_menu a:hover
{ color:#303030; }

#cssmenu_moo_menu li.active a
{ color:#303030; }

#cssmenu_moo_menu li li a
{ color:#fff; }

#cssmenu_moo_menu li li a:hover
{ color:#303030; }

#cssmenu_moo_menu li li a:active
{ color:#eee; }

#cssmenu_moo_menu ul ul li a
{ padding:0 10px; }

#cssmenu_moo_menu ul ul li.active
{ ; }

#cssmenu_moo_menu li.active
{ background:url(../images/moomenu1.png) repeat-x top #303030; }

#cssmenu_moo_menu li a:hover,#cssmenu_moo_menu li a:active
{ color:#303030; }

#cssmenu_moo_menup
{ height:20px;
  border:solid 1px #333;
  background:#555; }

#cssmenu_moo_menup ul
{ margin:0;
  padding:0;
  list-style:none; }

#cssmenu_moo_menup li
{ float:left;
  margin:0;
  margin-top:0;
  padding-left:0;
  list-style:none; }

#cssmenu_moo_menup li a
{ display:block;
  text-decoration:none;
  color:#eee;
  padding:0 10px 0 10px;
  font-size:11px;
  line-height:20px; }

#cssmenu_moo_menup li a:hover
{ color:#303030; }

#cssmenu_moo_menup li.active a
{ color:#303030; }

#cssmenu_moo_menup ul ul,#cssmenu_moo_menup ul ul ul
{ display:none; }

Answer 1

I'm not sure that's possible. I think you will need to set the width of each menu element specifically to ensure it spans the full width of its container, and make the appropriate adjustments to your CSS file once you add new elements.

Answer 2

You might try using display: table-cell instead of list-style: none on the top level lis, and then set display: table; width: 100% on the top level ul. This forces the the lis to be displayed using the table layout algorithm, which allows you to define how much space you want the whole thing to take up (in this case 100%).

Answer 3

I would use a table for that. It's one of the situations that I find a table is most appropriate also means that you don't have to worry about it later should your require adding more links in the future.