Question

考虑一个普通的2级下拉菜单：

HTML

<ul class="menu">
  <li><a href="#">Main item 1</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>
  ...
</ul>

CSS

.nav li { position: relative; float: left; }
.nav li a { display: block; }
.nav li ul { position: absolute; left: 0; top: 39px; }
.nav li ul li { float: left; }

我希望水平显示第二级项目，所有这些都在一行中。当我们定义ul.menu ul的宽度时，这不是问题。但如果第二级菜单项的数量不同，我们无法知道宽度，因此项目会垂直显示。

Answer 1

1）首先给你的元素id。

2）使用display：inline in your second li。

3）然后你给它一个公共宽度的位置，每个li例子里面有一个div跨度，并给它们相同的宽度。

<li><div id='1'>ur data ,</div></li>

同时将文字放在中心

text-align: center;

希望这有帮助。

以下代码适用于ff和chrome。的CSS：

.nav li { position: relative; float: left; }
.nav li a { display: block; }
.nav li ul { position: absolute; left: 0; top: 39px; }
.nav li ul li { float: left; }

ul.menu ul li {
display:inline-block;
}

Answer 2

尝试在子列表项上使用display：inline-block： http://jsfiddle.net/bd3SX/

Answer 3

正如vishal和Scott Simpson所说，display: inline-block;是解决问题的方法。但是这种方法在每个浏览器中都不起作用（至少目前为止）。如果父级有position: relative，则它间接确定其子级的最大宽度。所以我写了下面的脚本。

$.fn.dropdownNav = function () {

    var dropItem = $(this);

    // your dropdown menu height
    var menuHeight = 38;

    // dropdown menu is not displayed by default, we need to show it
    dropItem.children('ul').show();

    // increase the dropdown menu width, until all items fit in one row
    while ( dropItem.children('ul').height() > menuHeight ) {
        dropItem.children('ul').css({ width: '+=1' });
    }

    // it is done, let's hide the dropdown menu
    dropItem.children('ul').hide();

    // and bind hover events
    dropItem.hover (
        function () { $(this).children('ul').show(); },
        function () { $(this).children('ul').hide(); }
    );
};

// function call
$('.nav > li').each(function () { $(this).dropdownNav(); });

两级水平下拉菜单

3 个答案: