Hi I am using a CSS/Javascript drop down menu code and am having a bit of an issue branching out more levels in IE.
This works perfectly fine in Firefox but in IE when you hover over "Company" it puts "FAQ" OVER it instead of away..
This actually might be a Javascript issue; if it is I apologize for posting this question here.
Thanks for any help with this..
View Src:
http://adoptapoet.com/test/menu.html
And all code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="all" type="text/css">
.menu, .menu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 168px; /*WIDTH OF MAIN MENU ITEMS*/
}
.menu li{
position: relative;
}
.menu li a{
background: url(images/back.gif) repeat-x bottom left;
font: 13px Tahoma, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 4px 0;
padding-left: 8px;
border-top:1px solid #cce;
text-decoration: none;
}
.menu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 156px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
.menu li ul li{
float: left;
}
.menu li ul a{
width: 156px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}
.menu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(images/expand3.gif) no-repeat center right;
}
.menu li a:visited, .menu li a:active{
color: white;
}
.menu li a:hover{
background-image: url(images/back2.gif);
}
/* Holly Hack for IE \*/
* html .menu li { float: left; height: 1%; }
* html .menu li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
var menuids=new Array("verticalmenu")
var submenuoffset=-2
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++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoff set+"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)
</script>
</head>
<body>
<ul id="verticalmenu" class="menu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Company</a></li>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Health</a></li>
</ul>
<li><a href="#">Background</a></li>
<li><a href="#">Services</a></li>
</ul>
</li>
</ul>
</body>
</html>
