javascript - 在 javascript 中创建菜单问题

Question

我使用 js 和 css 创建了一个菜单。顶层 ul 中的每个 li 都有一个特定的背景图像以及一个特定的 onmouseover 图像。

一切工作正常，除了 onmouseover 背景，每当我在它下面有一个子菜单时。请检查以下链接下的垂直菜单: http://www.balouta.com/Autostar3/testmenu/test.html

使用的 JavaScript 如下:

var menuids=new Array("verticalmenu")
var submenuoffset=0 

function createcssmenu(){

for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){

    ultags[t].parentNode.onmouseover=function(){ 

    this.getElementsByTagName("ul")[0].style.right=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"

    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}


if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

Answer 1

问题是，您将鼠标悬停在顶级菜单上会显示 a div(子菜单)，该 div(子菜单)隐藏了下面顶部菜单的内容，因此无法将鼠标悬停在 a (顶部菜单)被触发。

一个小修复是删除具有子菜单的项目的宽度。

删除以下行: css 中的 width: 225px; (第 81 行)

对所有其他具有子菜单的菜单执行相同的操作。