兩個級別的水平下拉菜單

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

兩個級別的水平下拉菜單

回答

相關問題