Question

我有这个网站：

www.yoursdproperty.com

我需要顶级菜单项目HOME，BUYING PROPERTY，SELLING PROPERTY ETC ......

占据顶栏宽度的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，然后在顶级ul设置display: table; width: 100%。这会强制使用表格布局算法显示li s，这允许您定义整个事物需要多少空间（在这种情况下为100％）。

Answer 2

我不确定这是可能的。我认为你需要专门设置每个菜单元素的宽度，以确保它跨越容器的整个宽度，并在添加新元素后对CSS文件进行适当的调整。

Answer 3

我会用一张桌子。这是我发现表格最合适的情况之一也意味着如果您将来需要添加更多链接，您不必担心它。

Answer 4

Danny回答这里的工作是主要因素：

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

 #menu li{
    display: table-cell; 
 }

 #menu li a{
    display: block;
 }

css - 强制菜单项的宽度占用100％

4 个答案: