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!
Welcome to Tech Support Guy! Read our Welcome Guide or take a minute to watch the video below!
Web Design & Development 
Search 
