drop-down menu blinks

[sysadmin42]

the page: test.cfm

My issue is on the drop-down navigation (hover over 'about')

the css:

.drop_down { 
	background-color: #330066;
	color: #ffffff;
	text-align: left;
	z-index: 2;
	float: left;
}
.drop_down li {list-style-image: url("/images/nav_arrow.gif"); }
.drop_down li:hover,.drop_down a:hover {background-color: #9999CC;  width: inherit;}
.drop_down a { color:#FFFFFF; text-decoration: none;}
#about,#membership,#chapters,#halloffame,#catalog {
	position:absolute;
	padding: 5px 5px 5px 25px;
	display:none;
	left: 50%;
	line-height: 12pt;
}
#about { margin-left: -348px; }
#membership { margin-left: -260px; }
#chapters { margin-left: -170px; }
#halloffame { margin-left: -80px; }
#catalog { margin-left: 0px; }

the problem is that 1px high space between the title and the menu. If you move your mouse fast enough, it skips the space, but if you don't, the menu disappears!

Any ideas?!

 

[Vragabond]

First of all, your 1px gap is much bigger in Mozilla and it is quite impossible to jump across that gap in that browser. I suppose you should adjust top property of your absolutely positioned items.