两个级别的水平下拉菜单

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的宽度时，这不是问题。但是，如果第二级菜单项的数量不同，我们无法知道宽度，因此项目会垂直显示。

来源

2011-11-26 Webars

可能引起混淆的一点是，您在上面的html中没有实际使用'.nav'类。此外，你有多少*主要项目*，他们是垂直还是水平显示？ – tw16

由于维沙尔和斯科特·辛普森说，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(); });

来源

2011-12-05 21:28:48 Webars

1）首先给你的元素id。

2）使用display：inline在你的第二个li中。

3）然后你给它一个普通的宽度在每个li例子里面放一个div span，并给它们所有相同的宽度。

<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; 
}

来源

2011-11-26 14:08:11

我不清楚。你能提供更详细的代码吗？ – Webars

http://jsfiddle.net/bd3SX/ - 由scott –

我写道，它不适用于浏览器，只能在jsFiddle中使用。你可以自己尝试。 – Webars

尝试使用显示：inline-block的对孩子列表项： http://jsfiddle.net/bd3SX/

来源

2011-11-26 14:14:32

不幸的是，你的例子在jsFiddle中工作，但不在浏览器中。 – Webars

两个级别的水平下拉菜单

回答

相关问题