Question

I took some sample code to create a drop down menu from this website: http://www.javascriptkit.com/script/script2/verticalmenu.shtml

I have been editing it so that the main menu would use my own image (instead of their repeated green one) and then the drop down menus would be a large gray block (instead of their repeated green one again).

I’ve been able to insert my own image for the main menu and also have a successful gray block rollover drop down menu.

THE PROBLEM: When I test my page, it starts with the drop down menu open. I think the problem is somewhere inside my CSS/HTML manipulation. Should I change what is going on in my javascript? I noticed that it is calling up the UL tag.

This is the picture when I load my page:

http://imageshack.us/photo/my-images/850/hoverproblem.png/

This is the picture of it working properly after being rolled over:

http://imageshack.us/photo/my-images/152/hoverproblem2.png/

HTML:

<ul id="verticalmenu" class="glossymenu">
<li style="height:30px;"><a href="#" style="text-decoration:none;"></a>
  <ul id="submenu">
    <li id="submenuli"><a href="#" style="color:white; font: bold 12px Verdana, Helvetica,    sans-serif;">JavaScript Reference</a></li>
    <li id="submenuli"><a href="#">DOM Reference</a></li>
    <li id="submenuli"><a href="#">CSS Reference</a></li>
  </ul>
</li>

CSS:

.glossymenu, .glossymenu li ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 276px; /*WIDTH OF MAIN MENU ITEMS*/
height: 30px;
}

.glossymenu li{
position: relative;
}

.glossymenu li ul{
background: url(../Kruger%20Optical/images/tacdriver/riflenav.png);
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: 276px;
height: 30px;
text-decoration: none;
}

/* SUBMENU AND SUBMENULI is the drop down menu that keeps appearing when i load the page */

#submenu { /*SUB MENU STYLE*/
position: absolute;
background-color: #373737;
height: 300px;
width: 300px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: hidden;
}

#submenuli {
position: relative;
list-style-type: none;
margin: 0;
width: 300px; /*WIDTH OF MAIN MENU ITEMS*/
height: 20px;
display: hidden;
padding:15px;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
float: left;
}

.glossymenu li ul li{
float: left;
}

JAVASCRIPT:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

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.innerHTML="&nbsp;&nbsp;"
    ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")    [0].style.left=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

you have set display: block; on #submenu. That tells the rendering engine to display it as a block element. You want it hidden when the page first loads, so your stylesheet should contain this rule for #submenu:

display: none;

You’ll then need a snippet of JavaScript that will make #submenu visible when the user hovers their mouse over the <li> element in the main menu bar.