View Full Version : Is this possible?

02-16-2007, 12:03 PM
I am working with the script on this page:

Using this script, I went ahead and modified the CSS and the JS file, in order to have the sub menus appear with a one pixel right offset from the top level.

When I move the mouse slowly from the top level to the sub level, the sub level disappears. If the sub level is touching the top level, without the one pixel offset, the sub level does not disappear. I would like to have the sub level appear with a one pixel ofset to the right of the top level.

Is it possible to keep the sub level from disappearing while the mouse is moving across the one pixel difference?

02-16-2007, 03:07 PM
will need to see your modifications

02-19-2007, 04:32 PM
Please educate me on any modifications available to allow the sub menu to remain visible while the mouse pointer is being moved across a one or more pixel offset.

The initial JS script file is as follows:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-11 //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")
ultags[t].parentNode.onmouseover=function (){

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

The initial CSS file is as follows:

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;

.glossymenu li{
position: relative;
left: 12;

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 215px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;

.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 10px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 6px 0;
padding-left: 3px;
text-decoration: none;

.glossymenu .arrowdiv{
position: absolute;
right: 1px;
font: bold 12px Verdana, Helvetica, sans-serif;
background: transparent url(arrow.gif) no-repeat center right;

.glossymenu li a:visited, .glossymenu li a:active{
color: white;

.glossymenu li a:hover{
background-image: url(glossyback2.gif);

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */