css - заставляет ширину пунктов меню занимать 100%

Question

У меня есть этот сайт:

www.yoursdproperty.com

Мне нужны пункты верхнего меню ДОМОЙ, ПОКУПКА ИМУЩЕСТВА, ПРОДАЖА ИМУЩЕСТВА И Т.Д. ...

чтобы занять 100% ширины верхней панели. если я добавляю больше предметов, я соответственно изменяю их размер.

вот CSS, связанный с этой строкой меню. Есть ли что-то, что я могу изменить здесь, чтобы сделать это?

/* 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

Вы можете попробовать использовать display: table-cell вместо list-style: none на верхнем уровне li s, а затем установить display: table; width: 100% на верхнем уровне ul. Это вынуждает отображать li s с использованием алгоритма разметки таблицы, который позволяет вам определить, сколько места вы хотите занять целиком (в данном случае 100%).

Answer 2

Дэнни хорошо сработал, вот основной элемент:

 #menu_conteneur ul{
    display:table;
    width: 100%;    
 }

 #menu li{
    display: table-cell; 
 }

 #menu li a{
    display: block;
 }

Answer 3

Я бы использовал таблицу для этого. Это одна из ситуаций, в которых я считаю, что таблица является наиболее подходящей, и это означает, что вам не придется беспокоиться об этом позже, если вам потребуется добавить больше ссылок в будущем.

Answer 4

Я не уверен, что это возможно. Я думаю, что вам нужно будет задать ширину каждого элемента меню, чтобы убедиться, что он охватывает всю ширину своего контейнера, и внести соответствующие изменения в ваш файл CSS после добавления новых элементов.