開發垂直「UL」菜單

我正在開發「UL」菜單。這是一個垂直菜單。此垂直菜單的每個鏈接都有一個子菜單。菜單元素有一個onmouseout事件，用於刪除子菜單。我面對的問題是：開發垂直「UL」菜單

當我嘗試訪問子菜單時，在進入子菜單之前調度onmouseout事件。菜單和子菜單之間有空白（邊距）。我相信，當鼠標到達這個空間時，就會發出「onmouseout」事件。我能做些什麼，所以當鼠標位於菜單和子菜單之間的這個「空間」時，不會調度「onmouseout」？

謝謝。

PS：我不能發佈代碼

來源

2011-11-28 Marcelo Noronha

您希望子菜單UL位於主菜單LI的內部。你想使用mouseenter和mouseleave事件（或者只是CSS'：hover'）。 –

如果您不能發佈*代碼*發佈一些*代表*代碼來重現問題。很難回答CSS/HTML/JavaScript問題，沒有什麼可看的。 –

爲什麼你不能發佈代碼？你可以匿名它！刪除任何你不想讓人看到的東西，只是爲了讓我們有一些工作。 –

我在這種情況下做的是在刪除子菜單之前有一個短暫的setTimeout，然後在子菜單被隱藏時清除該超時。這樣可以讓鼠標有足夠的時間到達那裏，而不會影響視覺效果。

來源

2011-11-28 14:02:03

我正在考慮通過div創建此菜單。如果我通過「UL」創建了這個菜單，我必須爲每個子菜單鏈接添加settimeout，因爲它們有margin-bottom，這給我帶來了同樣的問題。所以，我認爲解決方案是使zIndex的子菜單的div容器大於其元素。 –

嘗試在檢查觀看元素（使用Chrome或螢火蟲）和重置所有UL和李CSS屬性。這將消除間距。

P.S.如果你不能發佈代碼，至少需要發佈一些代碼，這些代碼的功能相同，並且具有相同的問題。

來源

2011-11-28 13:59:56 Derek

這就是你應該如何構建你的HTML，不僅僅是爲了解決你的問題，也是因爲它在語義上起作用。

<ul> 
    <li>Main Menu Item 
    <ul> 
     <li>Sub Menu Item</li> 
     <li>Sub Menu Item</li> 
     <li>Sub Menu Item</li> 
    </ul></li> 
    <li>Main Menu Item 
    <ul> 
     <li>Sub Menu Item</li> 
     <li>Sub Menu Item</li> 
     <li>Sub Menu Item</li> 
    </ul></li> 
</ul>

請注意，子菜單位於主菜單項的內部。此嵌套賦予它的含義，也意味着當您將鼠標懸停在子菜單上時，您仍然懸停在包含子菜單的主菜單項上。

你可以像這樣的純CSS測試：

ul li ul { 
    display: none; 
} 

ul li:hover ul { 
    display: block; 
}

見的這個動作粗糙的演示上JS Fiddle

來源

2011-11-28 14:06:16 Fenton

下面是一個簡單的垂直菜單CSS完成：

#menu { 
    width: 100px; 
    background: #ddd; 
    cursor: default; 
} 

#menu > li { 
    padding: 6px; 
    border-bottom: 1px solid gray; 
    position: relative; 
} 

#menu > li:hover ul { 
    display: block; 
} 

#menu ul { 
    display: none; 
    position: absolute; 
    width: 100px; 
    left: 100px; top: 0; 
    background: #eee; 
} 

#menu ul > li { 
    padding: 6px; 
    border-bottom: 1px solid #bbb; 
} 

#menu ul > li:hover { 
    outline: 2px solid red; 
}

現場演示：http://jsfiddle.net/3xguj/show/

來源

2011-11-28 14:11:03

開發垂直「UL」菜單

回答

相關問題