Question

我构建了一个数据库驱动的菜单.....但是，由于有几个项目，菜单显示为两行。所以，我想把菜单项分成两行......你能告诉我怎么做吗？

这是我的css文件

    .menu
   {
width: 900px;
    }
    .menu ul
   {
list-style: none;
max-width: 900px;

   }
  .menu li
 {
list-style: none;
display:inline;
float: left;
height: 53px;
line-height: 53px;
  }

.menu li a
 {
display: inline;
float: left;
color: #852917;
font-size: 11px;
font-weight: bold;
line-height: 53px;
max-width:120px; 
text-decoration: none;

background: #ebdbca url(menu_037_bg.jpg) no-repeat left;
border-bottom: 2px solid #d7a278;
}
 .menu li a:hover
 {
width: 120px;
white-space: pre-wrap;
color: #fff;
background: #a73e29 url(menu_037_h.jpg) no-repeat left;
border-bottom: 2px solid #b75542;
   }
  .menu li ul{

    border-left:2px solid #a80329;
    border-right:2px solid #a80329;
    border-bottom:2px solid #a80329;
    display:none;
    height:auto;
    width:120px;
    filter:alpha(opacity=95);
    opacity:0.95;
    position:absolute;

    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
.menu li:hover ul{
    display:block;
    }

Answer 1

为基于列表的菜单设置样式的一些最佳做法：

1）不要设置LI的样式（除了重置边距，填充和使用float:left，如果需要）。

2）使用display:block并在A标记上加上所有样式。你不需要display: inline; float: left;或任何其他定位代码。只需设置你的宽度，填充边距，字体和颜色，你就可以了。长文本将自动换行为两行。

Answer 2

这是最后的菜单......两行下拉....

http://jsfiddle.net/tJGx5/34/

以它为例，两行下拉列表效果不佳：p

更新：修复IE中的z-index错误

打印两行中的菜单项.... CSS

2 个答案: