Dropdown menu problem...

TheTrueMaverick · 17-Jan-2009, 09:19 PM #1

Hello folks,

I have been trying to make a drop-down menu with javascript and css, and I have been having this problem I cannot seem to fix.

Every time I hover on one of the navigations, it's meant to have a drop down menu straight below. But yet, it keeps dropping down out of where it's not meant to:

/* on image, the mouse is hovering on "Diving" */

I believe this is a CSS problem, but I cannot seem to fix, would appreciate if you guys could help me out.

Here're the code:

HTML:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
<head>
<title>Dive Club</title>
</head>
<body>
<div id="header">
	<ul id="navi">
		<li id="current">Home</li>
		<li><a href="about.html">About</a></li>
		<li>
			<a href="diving.html" onmouseover="mopen('m1')" onmouseout="mclosetime()">Diving</a>
			<div id="m1" onmouseover="mopen('m1')" onmouseout="mclosetime()">
				<a href="diveinfo.html">Info</a>
				<a href="divesites.html">Sites</a>
			</div>
		</li>
		<li><a href="gallery.html">Gallery</a></li>
		<li><a href="contact.html">Contact</a></li>
		<li><a href="links.html">Links</a></li>
	</ul>
</div>
<div style="clear:both"></div>
<div id="content"></div>
</body>
</html>

CSS:

Code:

p, h1, h2, h3, h4, h5, ul, li, div{
	margin:0;
	padding:0;
}
body{
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(images/body.png);
	background-position:top center;
	background-attachment:fixed;
	background-repeat:repeat-y;
	background-color:#b0d1fd;
	width:750px;
	margin:0 auto;
}
#header{
	background-image:url(images/header.png);
	height:175px;
}
#navi{
	padding-top:147px;
	text-align:center;
}
#navi li{
	list-style:none;
	display:inline;
}
#navi li a{
	padding-left:20px; padding-rigt:20px;
	color:#0033CC;
	background-color:inherit;
	text-decoration:none;
}
#navi div{
	position:absolute;
	visibility:hidden;
	background-color:#CCCCCC;
	border:1px solid #333333;
}
#navi div a{
	position:relative;
	display:block;
	padding-left:10px; padding-right:10px;
	width:auto;
	white-space:nowrap;
	text-align:center;
	background-color:#CCCCCC;	
}
#navi #current{
	color:#0099FF;
}

Javascript:

Code:

var timeout=500;
var closetimer=0;
var ddmenuitem=0;

/* open hidden layer */
function mopen(id){	
	mcancelclosetime();// cancel close timer

	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';// close old layer

	/* get new layer and show it */
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
}

/* close showed layer */
function mclose(){
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

/* go close timer */
function mclosetime(){
	closetimer = window.setTimeout(mclose, timeout);
}

/* cancel close timer */
function mcancelclosetime(){
	if(closetimer){
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

/* close layer when click-out */
document.onclick = mclose;

I believe it's because of the CSS's #navi div's position absoluting, but if I change to relative or some sort, invisibility doesn't seem to work and give me an extra space.

Thanks as usual!

tomdkat · 19-Jan-2009, 05:32 PM #2

In which browser(s) are you having this problem?

Peace...

TheTrueMaverick · 19-Jan-2009, 06:44 PM #3

All... Haha..

tomdkat · 08:04 PM

Do they all display the menu in the same incorrect place? Which specific browsers have you tried?

EDIT: Where did you get the JavaScript menu script? It appears some additional styling is needed to position the drop-down menu properly.

Peace...

dannyn · 20-Jan-2009, 06:21 PM #5

I have had good luck with this pure css drop down menu..http://www.cssplay.co.uk/menus/basic_dd.html
You could style that up to the way you like. Just another option if you do not want to fix this one.

Tag Cloud
access acer asus bios bsod computer crash dns driver drivers error ethernet excel freeze gaming google hard drive hardware hdmi internet laptop mac malware memory monitor motherboard mouse network printer problem ram registry router server slow software sound svchost.exe trojan usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!