看到你的代碼或知道什麼是不工作將是非常有益的。預警：這段代碼看起來相當複雜，並且有一些移動部件，但是一旦你有了它，添加新的菜單，子菜單和「超級」子菜單就很簡單了 - 你所要做的就是添加一個無序列表並分配適當的類。真的很容易。複雜的部分是supersubmenu當前正在展示的jQuery記憶功能，並管理人們將鼠標移動到所有位置時發生的情況。
這就是說，嘗試這個想法：顯示每個菜單「部分」中的第一個列表元素，並設置其下的所有其他顯示：無。給他們特定的類，並設置頂部元素的懸停來顯示其他列表元素。如果您需要「第三個」圖層，請創建一個完全隱藏的SEPARATE列表。將一個SEPARATE類添加到將觸發第三層顯示的「子菜單」項中，然後爲第二層的懸停添加一個事件處理程序，以顯示第三層。很難解釋，但這裏有一個例子：
HTML：
<div style="display:table-cell; margin:auto; border:none;" runat="server" id="divMenu">
<ul class="MainMenu">
<li class="MainMenu NoSuperSub">ES</li>
<li class="MainMenu SubMenu Link NoSuperSub" data-url="WebPage.aspx" style="display:none;">Go To A Page</li>
<li class="MainMenu SubMenu SubWithSub" data-menu="AnotherMenu" style="display:none;">Open Another Menu</li>
</ul>
</div>
<ul class="MainMenu SuperSubMenu" id="AnotherMenu" style="display:none; margin:auto; border:none;">
<li class="MainMenu SubMenu Link SuperSubMenu" data-url="WebPage.aspx" style="display:none;">Another WebPage</li>
</ul>
的Javascript：
//Global Variables
var SuperSubMenuName;
var CurrentMenu;
var TopPosition;
var LeftPosition;
var ViewingSuperSubMenu = false;
var SetTimeOutFunction;
//Event Handlers
$("li.MainMenu").mouseover(function (e) {
$(this).css("display", "inline-block");
$(this).siblings().css("display", "inline-block");
});
$("ul.MainMenu").mouseout(function (e) {
$(this).children("li").each(function() {
if ($(this).prop("class").toString().indexOf("SubMenu") >= 0)
$(this).css("display", "none");
});
});
$(".Link").click(function (e) {
$("#PostBackURL").val($(this).data("url"));
$("#PostBackValue").val("MenuSelection");
$("#aspnetForm").submit();
});
$("li.SubWithSub").mouseover(function (e) {
HideSuperSubMenu();
CurrentMenu = $(this).parent("ul").parent("div");
position = getPosition(this);
TopPosition = position.y - 108 ;
LeftPosition = position.x + 117;
SuperSubMenuName = "#" + $(this).data("menu");
ShowSuperSubMenu();
ViewingSuperSubMenu = false;
clearTimeout(SetTimeOutFunction);
SetTimeOutFunction = setTimeout(HideSuperSubMenuIfNotViewing, 1000);
});
$("ul.SuperSubMenu").mouseover(function (e) {
CurrentMenu.children("ul").children("li").each(function() {
$(this).css("display", "inline-block");
});
ViewingSuperSubMenu = true;
});
$("ul.SuperSubMenu").mouseout(function (e) {
CurrentMenu.children("ul").children("li").each(function() {
if ($(this).prop("class").toString().indexOf("SubMenu") >= 0)
$(this).css("display", "none");
});
ViewingSuperSubMenu = false;
});
$("li.NoSuperSub").mouseover(function (e) {
HideSuperSubMenu();
});
//Functions
function ShowSuperSubMenu(){
$(SuperSubMenuName).css({top: TopPosition, left: LeftPosition, position: "absolute"});
$(SuperSubMenuName).css("display", "table-cell");
$(SuperSubMenuName).children("li").each(function() {
$(this).css("display", "inline-block");
});
}
function HideSuperSubMenu() {
$(SuperSubMenuName).css("display", "none");
$(SuperSubMenuName).children("li").each(function() {
$(this).css("display", "none");
});
}
function HideSuperSubMenuIfNotViewing() {
if (ViewingSuperSubMenu == false)
HideSuperSubMenu();
}
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
我不確定我是否理解你想要的安排或外觀。主頁|選項|菜單1 | 2 | 3 | 4應該是一個水平導航？然後，當懸停在選項>>>上時，子菜單出現在主導航欄下方，並且選項1-3垂直堆疊？ – Michael 2014-09-26 19:13:23
這是你要找的嗎？ http://jsfiddle.net/bd1eftst/ – hungerstar 2014-09-26 19:23:58
這似乎是正確的從我的解釋@ hungerstar - 你應該讓它成爲一個答案。 – Michael 2014-09-26 20:06:39