為右側菜單添加javascript時，左側子菜單不會出現。 但為什么？

Question

我這里有這個菜單。 工作正常。 我想要一個在頁面左側，一個在右側。 當我只有左側菜單時，它可以完美運行。 但是，一旦我為右菜單添加了javascript代碼，似乎就會影響到左菜單的js，並且子菜單也不再顯示。

有人可以幫我嗎？

非常感謝你

 /*navmenu-left*/ var mcVM_options = { menuId: "menu-v", alignWithMainMenu: false }; /* www.menucool.com/vertical/vertical-menu.*/ init_v_menu(mcVM_options); function init_v_menu(a) { if (window.addEventListener) window.addEventListener("load", function() { start_v_menu(a) }, false); else window.attachEvent && window.attachEvent("onload", function() { start_v_menu(a) }) } function start_v_menu(i) { var e = document.getElementById(i.menuId), j = e.offsetHeight, b = e.getElementsByTagName("ul"), g = /msie|MSIE 6/.test(navigator.userAgent); if (g) for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) { h[a].onmouseover = function() { this.className = "onhover" }; h[a].onmouseout = function() { this.className = "" } } for (var k = function(a, b) { if (a.id == i.menuId) return b; else { b += a.offsetTop; return k(a.parentNode.parentNode, b) } }, a = 0; a < b.length; a++) { var c = b[a].parentNode; c.getElementsByTagName("a")[0].className += " arrow"; b[a].style.left = c.offsetWidth + "px"; b[a].style.top = c.offsetTop + "px"; if (i.alignWithMainMenu) { var d = k(c.parentNode, 0); if (b[a].offsetTop + b[a].offsetHeight + d > j) { var f; if (b[a].offsetHeight > j) f = -d; else f = j - b[a].offsetHeight - d; b[a].style.top = f + "px" } } c.onmouseover = function() { if (g) this.className = "onhover"; var a = this.getElementsByTagName("ul")[0]; if (a) { a.style.visibility = "visible"; a.style.display = "block"; } }; c.onmouseout = function() { if (g) this.className = ""; this.getElementsByTagName("ul")[0].style.visibility = "hidden"; this.getElementsByTagName("ul")[0].style.display = "none" } } for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none" } /*navmenu-right*/ var mcVM_options = { menuId: "menu-vr", alignWithMainMenu: false }; /* www.menucool.com/vertical/vertical-menu.*/ init_v_menu(mcVM_options); function init_v_menu(a) { if (window.addEventListener) window.addEventListener("load", function() { start_v_menu(a) }, false); else window.attachEvent && window.attachEvent("onload", function() { start_v_menu(a) }) } function start_v_menu(i) { var e = document.getElementById(i.menuId), j = e.offsetHeight, b = e.getElementsByTagName("ul"), g = /msie|MSIE 6/.test(navigator.userAgent); if (g) for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) { h[a].onmouseover = function() { this.className = "onhover" }; h[a].onmouseout = function() { this.className = "" } } for (var k = function(a, b) { if (a.id == i.menuId) return b; else { b += a.offsetTop; return k(a.parentNode.parentNode, b) } }, a = 0; a < b.length; a++) { var c = b[a].parentNode; c.getElementsByTagName("a")[0].className += " arrow"; b[a].style.right = c.offsetWidth + "px"; b[a].style.top = c.offsetTop + "px"; if (i.alignWithMainMenu) { var d = k(c.parentNode, 0); if (b[a].offsetTop + b[a].offsetHeight + d > j) { var f; if (b[a].offsetHeight > j) f = -d; else f = j - b[a].offsetHeight - d; b[a].style.top = f + "px" } } c.onmouseover = function() { if (g) this.className = "onhover"; var a = this.getElementsByTagName("ul")[0]; if (a) { a.style.visibility = "visible"; a.style.display = "block"; } }; c.onmouseout = function() { if (g) this.className = ""; this.getElementsByTagName("ul")[0].style.visibility = "hidden"; this.getElementsByTagName("ul")[0].style.display = "none" } } for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none" } 

 /*nav-menu right*/ #menu-v, #menu-v ul { width: 200px; position: relative; font-size: 0; list-style: none; margin: 0; padding: 0; display: block; z-index: 9; margin-top: 135px; float: left; } /* Top level menu links style ---------------------------------------*/ #menu-v li { background: url(bg.gif) repeat-x 0 2px; list-style: none; margin: 0; padding: 0; } #menu-v li a { font: normal 17px Gitan Latin; display: block; color: black; text-decoration: none; line-height: 39px; padding-left: 26px; border: none; } #menu-v ul li a { line-height: 39px; } #menu-v li a.arrow:hover { background-image: url(../assets/ringsenberg-pfeil-rechts.svg); background-repeat: no-repeat; background-position: 170px 12px; } /*Sub level menu items ---------------------------------------*/ #menu-v li ul { position: absolute; width: 200px; /*Sub Menu Items width */ visibility: hidden; margin: 0px; } #menu-v a.arrow { background-image: url(../assets/ringsenberg-pfeil-rechts.svg); background-repeat: no-repeat; background-position: 170px 12px; } #menu-v li:hover, #menu-v li.onhover { transition: all .5s; background: rgba(198, 156, 109, .2); border-bottom: solid; border-width: 1px; border-color: #C69C6D; } #menu-v ul li { background: none; } #menu-v ul li:hover, #menu-v ul li.onhover { background: #FFF; background: rgba(198, 156, 109, .2); border-right: solid; border-width: 1px; border-color: #C69C6D; } #menu-v li a.top { color: white; transition: all .5s; } #menu-v li a.top:hover { color: black; background: rgba(226, 205, 182, 1) } /*nav-menu right*/ #menu-vr, #menu-vr ul { width: 200px; position: relative; font-size: 0; list-style: none; margin: 0; padding: 0; display: block; z-index: 9; margin-top: 135px; float: right; text-align: right; } /* Top level menu links style ---------------------------------------*/ #menu-vr li { background: url(bg.gif) repeat-x 0 2px; list-style: none; margin: 0; padding: 0; } #menu-vr li a { font: normal 17px Gitan Latin; display: block; color: black; text-decoration: none; line-height: 39px; padding-right: 26px; border: none; } #menu-vr ul li a { line-height: 39px; } #menu-vr li a.arrow:hover { background-image: url(../assets/ringsenberg-menue-pfeil-links.svg); background-repeat: no-repeat; background-position: 30px 12px; } /*Sub level menu items ---------------------------------------*/ #menu-vr li ul { position: absolute; width: 200px; /*Sub Menu Items width */ visibility: hidden; margin: 0px; } #menu-vr a.arrow { background-image: url(../assets/ringsenberg-menue-pfeil-links.svg); background-repeat: no-repeat; background-position: 30px 12px; } #menu-vr li:hover, #menu-vr li.onhover { transition: all .5s; background: rgba(198, 156, 109, .2); border-bottom: solid; border-width: 1px; border-color: #C69C6D; } #menu-vr ul li { background: none; } #menu-vr ul li:hover, #menu-vr ul li.onhover { background: #FFF; background: rgba(198, 156, 109, .2); border-left: solid; border-width: 1px; border-color: #C69C6D; } #menu-vr li a.top { color: white; transition: all .5s; } #menu-vr li a.top:hover { color: black; background: rgba(226, 205, 182, 1) } 

 <ul id="menu-v"> <li><a href="#" class="top">Home</a></li> <li><a href="#">Instrumente</a> <ul class="sub"> <li><a href="vertical-menu#1">Vertical Menu</a></li> <li><a href="vertical-menu#2">Vertical Menus</a></li> </ul> </li> <li><a href="#">Restauration</a> <ul class="sub"> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> <li><a href="#">Sub Item 3.4</a></li> <li><a href="#">Sub Item 3.5</a></li> </ul> </li> <li><a href="#">Grafikdesign</a></li> <li><a href="#">CNC-Fertigung</a> <ul class="sub"> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ul> </li> </ul> <ul id="menu-vr"> <li><a href="#" class="top">Home</a></li> <li><a href="#">Instrumente</a> <ul class="sub"> <li><a href="vertical-menu#1">Vertical Menu</a></li> <li><a href="vertical-menu#2">Vertical Menus</a></li> </ul> </li> <li><a href="#">Restauration</a> <ul class="sub"> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> <li><a href="#">Sub Item 3.4</a></li> <li><a href="#">Sub Item 3.5</a></li> </ul> </li> <li><a href="#">Grafikdesign</a></li> <li><a href="#">CNC-Fertigung</a> <ul class="sub"> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ul> </li> </ul> 

Answer 1

它正在顯示，但sub-nav的樣式正確為200px，因此沒有顯示其應有的位置。 如果您為子導航設置了left：200px的樣式，則它看起來應該與您確實擁有的樣式相同，但是它沒有生效，因為您為函數命名的名稱相同，因此兩個菜單都在調用最后一個start_v_menu函數。 我更改了名稱，因此現在可以使用。

 /*navmenu-left*/ var mcVM_options = { menuId: "menu-v", alignWithMainMenu: false }; /* www.menucool.com/vertical/vertical-menu.*/ init_v_menu(mcVM_options); function init_v_menu(a) { if (window.addEventListener) window.addEventListener("load", function() { start_v_menu(a) }, false); else window.attachEvent && window.attachEvent("onload", function() { start_v_menu(a) }) } function start_v_menu(i) { var e = document.getElementById(i.menuId), j = e.offsetHeight, b = e.getElementsByTagName("ul"), g = /msie|MSIE 6/.test(navigator.userAgent); if (g) for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) { h[a].onmouseover = function() { this.className = "onhover" }; h[a].onmouseout = function() { this.className = "" } } for (var k = function(a, b) { if (a.id == i.menuId) return b; else { b += a.offsetTop; return k(a.parentNode.parentNode, b) } }, a = 0; a < b.length; a++) { var c = b[a].parentNode; c.getElementsByTagName("a")[0].className += " arrow"; b[a].style.left = c.offsetWidth + "px"; b[a].style.top = c.offsetTop + "px"; if (i.alignWithMainMenu) { var d = k(c.parentNode, 0); if (b[a].offsetTop + b[a].offsetHeight + d > j) { var f; if (b[a].offsetHeight > j) f = -d; else f = j - b[a].offsetHeight - d; b[a].style.top = f + "px" } } c.onmouseover = function() { if (g) this.className = "onhover"; var a = this.getElementsByTagName("ul")[0]; if (a) { a.style.visibility = "visible"; a.style.display = "block"; } }; c.onmouseout = function() { if (g) this.className = ""; this.getElementsByTagName("ul")[0].style.visibility = "hidden"; this.getElementsByTagName("ul")[0].style.display = "none" } } for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none" } /*navmenu-right*/ var mcVM_options = { menuId: "menu-vr", alignWithMainMenu: false }; /* www.menucool.com/vertical/vertical-menu.*/ init_vr_menu(mcVM_options); function init_vr_menu(a) { if (window.addEventListener) window.addEventListener("load", function() { start_vr_menu(a) }, false); else window.attachEvent && window.attachEvent("onload", function() { start_vr_menu(a) }) } function start_vr_menu(i) { var e = document.getElementById(i.menuId), j = e.offsetHeight, b = e.getElementsByTagName("ul"), g = /msie|MSIE 6/.test(navigator.userAgent); if (g) for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) { h[a].onmouseover = function() { this.className = "onhover" }; h[a].onmouseout = function() { this.className = "" } } for (var k = function(a, b) { if (a.id == i.menuId) return b; else { b += a.offsetTop; return k(a.parentNode.parentNode, b) } }, a = 0; a < b.length; a++) { var c = b[a].parentNode; c.getElementsByTagName("a")[0].className += " arrow"; b[a].style.right = c.offsetWidth + "px"; b[a].style.top = c.offsetTop + "px"; if (i.alignWithMainMenu) { var d = k(c.parentNode, 0); if (b[a].offsetTop + b[a].offsetHeight + d > j) { var f; if (b[a].offsetHeight > j) f = -d; else f = j - b[a].offsetHeight - d; b[a].style.top = f + "px" } } c.onmouseover = function() { if (g) this.className = "onhover"; var a = this.getElementsByTagName("ul")[0]; if (a) { a.style.visibility = "visible"; a.style.display = "block"; } }; c.onmouseout = function() { if (g) this.className = ""; this.getElementsByTagName("ul")[0].style.visibility = "hidden"; this.getElementsByTagName("ul")[0].style.display = "none" } } for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none" } 

 /*nav-menu right*/ #menu-v, #menu-v ul { width: 200px; position: relative; font-size: 0; list-style: none; margin: 0; padding: 0; display: block; z-index: 9; margin-top: 135px; float: left; } /* Top level menu links style ---------------------------------------*/ #menu-v li { background: url(bg.gif) repeat-x 0 2px; list-style: none; margin: 0; padding: 0; } #menu-v li a { font: normal 17px Gitan Latin; display: block; color: black; text-decoration: none; line-height: 39px; padding-left: 26px; border: none; } #menu-v ul li a { line-height: 39px; } #menu-v li a.arrow:hover { background-image: url(../assets/ringsenberg-pfeil-rechts.svg); background-repeat: no-repeat; background-position: 170px 12px; } /*Sub level menu items ---------------------------------------*/ #menu-v li ul { position: absolute; width: 200px; /*Sub Menu Items width */ visibility: hidden; margin: 0px; } #menu-v a.arrow { background-image: url(../assets/ringsenberg-pfeil-rechts.svg); background-repeat: no-repeat; background-position: 170px 12px; } #menu-v li:hover, #menu-v li.onhover { transition: all .5s; background: rgba(198, 156, 109, .2); border-bottom: solid; border-width: 1px; border-color: #C69C6D; } #menu-v ul li { background: none; } #menu-v ul li:hover, #menu-v ul li.onhover { background: #FFF; background: rgba(198, 156, 109, .2); border-right: solid; border-width: 1px; border-color: #C69C6D; } #menu-v li a.top { color: white; transition: all .5s; } #menu-v li a.top:hover { color: black; background: rgba(226, 205, 182, 1) } /*nav-menu right*/ #menu-vr, #menu-vr ul { width: 200px; position: relative; font-size: 0; list-style: none; margin: 0; padding: 0; display: block; z-index: 9; margin-top: 135px; float: right; text-align: right; } /* Top level menu links style ---------------------------------------*/ #menu-vr li { background: url(bg.gif) repeat-x 0 2px; list-style: none; margin: 0; padding: 0; } #menu-vr li a { font: normal 17px Gitan Latin; display: block; color: black; text-decoration: none; line-height: 39px; padding-right: 26px; border: none; } #menu-vr ul li a { line-height: 39px; } #menu-vr li a.arrow:hover { background-image: url(../assets/ringsenberg-menue-pfeil-links.svg); background-repeat: no-repeat; background-position: 30px 12px; } /*Sub level menu items ---------------------------------------*/ #menu-vr li ul { position: absolute; width: 200px; /*Sub Menu Items width */ visibility: hidden; margin: 0px; } #menu-vr a.arrow { background-image: url(../assets/ringsenberg-menue-pfeil-links.svg); background-repeat: no-repeat; background-position: 30px 12px; } #menu-vr li:hover, #menu-vr li.onhover { transition: all .5s; background: rgba(198, 156, 109, .2); border-bottom: solid; border-width: 1px; border-color: #C69C6D; } #menu-vr ul li { background: none; } #menu-vr ul li:hover, #menu-vr ul li.onhover { background: #FFF; background: rgba(198, 156, 109, .2); border-left: solid; border-width: 1px; border-color: #C69C6D; } #menu-vr li a.top { color: white; transition: all .5s; } #menu-vr li a.top:hover { color: black; background: rgba(226, 205, 182, 1) } 

 <ul id="menu-v"> <li><a href="#" class="top">Home</a></li> <li><a href="#">Instrumente</a> <ul class="sub"> <li><a href="vertical-menu#1">Vertical Menu</a></li> <li><a href="vertical-menu#2">Vertical Menus</a></li> </ul> </li> <li><a href="#">Restauration</a> <ul class="sub"> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> <li><a href="#">Sub Item 3.4</a></li> <li><a href="#">Sub Item 3.5</a></li> </ul> </li> <li><a href="#">Grafikdesign</a></li> <li><a href="#">CNC-Fertigung</a> <ul class="sub"> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ul> </li> </ul> <ul id="menu-vr"> <li><a href="#" class="top">Home</a></li> <li><a href="#">Instrumente</a> <ul class="sub"> <li><a href="vertical-menu#1">Vertical Menu</a></li> <li><a href="vertical-menu#2">Vertical Menus</a></li> </ul> </li> <li><a href="#">Restauration</a> <ul class="sub"> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> <li><a href="#">Sub Item 3.4</a></li> <li><a href="#">Sub Item 3.5</a></li> </ul> </li> <li><a href="#">Grafikdesign</a></li> <li><a href="#">CNC-Fertigung</a> <ul class="sub"> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ul> </li> </ul> 

Answer 2

問題是您在子菜單上的元素樣式。 您將此設置為：

right: 200px

我認為您要將左側子菜單的此項設置為：

left: 200px

Answer 3

您在兩個菜單中都使用了相同的函數和變量名，根據繼承，只有第二個函數將同時在兩個條件下運行，您需要更改函數名。

我已將其更改為左側菜單。

編輯：您無需多次編寫相同的函數，而是可以以數組格式傳遞nav id ，然后使用CSS處理sub-nav位置，我也刪除了onload event listener 。

 var mcVM_options = [{ menuId: "menu-vr", alignWithMainMenu: false }, { menuId: "menu-v", alignWithMainMenu: false } ]; function start_v_menu(i) { var e = document.getElementById(i.menuId), j = e.offsetHeight, b = e.getElementsByTagName("ul"), g = /msie|MSIE 6/.test(navigator.userAgent); if (g) for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) { h[a].onmouseover = function() { this.className = "onhover" }; h[a].onmouseout = function() { this.className = "" } } for (var k = function(a, b) { if (a.id == i.menuId) return b; else { b += a.offsetTop; return k(a.parentNode.parentNode, b) } }, a = 0; a < b.length; a++) { var c = b[a].parentNode; c.getElementsByTagName("a")[0].className += " arrow"; b[a].style.right = c.offsetWidth + "px"; b[a].style.top = c.offsetTop + "px"; if (i.alignWithMainMenu) { var d = k(c.parentNode, 0); if (b[a].offsetTop + b[a].offsetHeight + d > j) { var f; if (b[a].offsetHeight > j) f = -d; else f = j - b[a].offsetHeight - d; b[a].style.top = f + "px" } } c.onmouseover = function() { if (g) this.className = "onhover"; var a = this.getElementsByTagName("ul")[0]; if (a) { a.style.visibility = "visible"; a.style.display = "block"; } }; c.onmouseout = function() { if (g) this.className = ""; this.getElementsByTagName("ul")[0].style.visibility = "hidden"; this.getElementsByTagName("ul")[0].style.display = "none" } } for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none" } for (var j = 0; j < mcVM_options.length; j++) { start_v_menu(mcVM_options[j]); } 

 /*nav-menu right*/ #menu-v, #menu-v ul { width: 200px; position: relative; font-size: 0; list-style: none; margin: 0; padding: 0; display: block; z-index: 9; margin-top: 135px; float: left; } /* Top level menu links style ---------------------------------------*/ #menu-v li { background: url(bg.gif) repeat-x 0 2px; list-style: none; margin: 0; padding: 0; } #menu-v li a { font: normal 17px Gitan Latin; display: block; color: black; text-decoration: none; line-height: 39px; padding-left: 26px; border: none; } #menu-v ul li a { line-height: 39px; } #menu-v li a.arrow:hover { background-image: url(../assets/ringsenberg-pfeil-rechts.svg); background-repeat: no-repeat; background-position: 170px 12px; } /*Sub level menu items ---------------------------------------*/ #menu-v li ul { position: absolute; width: 200px; /*Sub Menu Items width */ visibility: hidden; margin: 0px; } #menu-v a.arrow { background-image: url(../assets/ringsenberg-pfeil-rechts.svg); background-repeat: no-repeat; background-position: 170px 12px; } #menu-v li:hover, #menu-v li.onhover { transition: all .5s; background: rgba(198, 156, 109, .2); border-bottom: solid; border-width: 1px; border-color: #C69C6D; } #menu-v ul li { background: none; } #menu-v ul li:hover, #menu-v ul li.onhover { background: #FFF; background: rgba(198, 156, 109, .2); border-right: solid; border-width: 1px; border-color: #C69C6D; } #menu-v li a.top { color: white; transition: all .5s; } #menu-v li a.top:hover { color: black; background: rgba(226, 205, 182, 1) } /*nav-menu right*/ #menu-vr, #menu-vr ul { width: 200px; position: relative; font-size: 0; list-style: none; margin: 0; padding: 0; display: block; z-index: 9; margin-top: 135px; float: right; text-align: right; } /* Top level menu links style ---------------------------------------*/ #menu-vr li { background: url(bg.gif) repeat-x 0 2px; list-style: none; margin: 0; padding: 0; } #menu-vr li a { font: normal 17px Gitan Latin; display: block; color: black; text-decoration: none; line-height: 39px; padding-right: 26px; border: none; } #menu-vr ul li a { line-height: 39px; } #menu-vr li a.arrow:hover { background-image: url(../assets/ringsenberg-menue-pfeil-links.svg); background-repeat: no-repeat; background-position: 30px 12px; } /*Sub level menu items ---------------------------------------*/ #menu-vr li ul { position: absolute; width: 200px; /*Sub Menu Items width */ visibility: hidden; margin: 0px; } #menu-vr a.arrow { background-image: url(../assets/ringsenberg-menue-pfeil-links.svg); background-repeat: no-repeat; background-position: 30px 12px; } #menu-vr li:hover, #menu-vr li.onhover { transition: all .5s; background: rgba(198, 156, 109, .2); border-bottom: solid; border-width: 1px; border-color: #C69C6D; } #menu-vr ul li { background: none; } #menu-vr ul li:hover, #menu-vr ul li.onhover { background: #FFF; background: rgba(198, 156, 109, .2); border-left: solid; border-width: 1px; border-color: #C69C6D; } #menu-vr li a.top { color: white; transition: all .5s; } #menu-vr li a.top:hover { color: black; background: rgba(226, 205, 182, 1) } .leftnav ul.sub { right: auto!important; left: 100%; } 

 <ul id="menu-v" class="leftnav"> <li><a href="#" class="top">Home</a></li> <li><a href="#">Instrumente</a> <ul class="sub"> <li><a href="vertical-menu#1">Vertical Menu</a></li> <li><a href="vertical-menu#2">Vertical Menus</a></li> </ul> </li> <li><a href="#">Restauration</a> <ul class="sub"> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> <li><a href="#">Sub Item 3.4</a></li> <li><a href="#">Sub Item 3.5</a></li> </ul> </li> <li><a href="#">Grafikdesign</a></li> <li><a href="#">CNC-Fertigung</a> <ul class="sub"> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ul> </li> </ul> <ul id="menu-vr"> <li><a href="#" class="top">Home</a></li> <li><a href="#">Instrumente</a> <ul class="sub"> <li><a href="vertical-menu#1">Vertical Menu</a></li> <li><a href="vertical-menu#2">Vertical Menus</a></li> </ul> </li> <li><a href="#">Restauration</a> <ul class="sub"> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> <li><a href="#">Sub Item 3.4</a></li> <li><a href="#">Sub Item 3.5</a></li> </ul> </li> <li><a href="#">Grafikdesign</a></li> <li><a href="#">CNC-Fertigung</a> <ul class="sub"> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ul> </li> </ul>