Question

我网站上的下拉菜单（分辨率为1366x768）项目太多，超出了徽标的界限。如何限制css中的项目数量（不要超出徽标，只是转移到下一行）？

网站 http://womab.com.ua/en/for-authors/（有效项目有关参与者的信息，请参阅下面的子菜单列表。）

现在使用CSS：

menu ul.submenu {
  position: absolute;
  left: 0;
  width: 93%;
  text-align: right;
  padding: 0 7% .8em 0;
  margin: 0;
}

提前致谢！

Answer 1

menu ul.submenu {
    margin: 0;
    padding: 0 7% 0.8em 0;
    position: absolute;
    right: 20%;
    text-align: right;
    width: 50%;
}

在right和width属性上使用具有不同值的媒体查询，使其适用于较小的布局。

Answer 2

你也可以试试这些;

  menu ul.submenu {
    position: absolute;
    left: 0px;
    width: 87%;
    text-align: right;
    padding: 0px;
    margin-left: 176px;
    font-size: 15px;
}

但也推荐媒体查询。

Answer 3

使用div标签将您的单列子菜单转换为两列。

<div style="float: left; width: 50%;"> </div>

将一半列表放在div标签之间，另一半放在另一组div标签之间。无需更改其他代码。子菜单将自动变为双倍宽。

通过更改宽度百分比，您可以添加更多列（例如，三列为33％，四列为25％）。

菜单下拉列表太长

3 个答案: