Beste mensen, ik heb echt ff wat hulp nodig. Ben nu al een paar avonden aan het stoeien met een horizontaal menu. Forum hier uitgespit met allerlei dingen, maar ik krijg het niet voor elkaar. Ben hier ook nog niet zo handig mee.
Ik wil een horizontaal menu met daaronder een dropdown die ook horizontaal is. En dat is nou juist het probleem. In Firefox werkt ie redelijk, maar in IE krijg ik het maar niet aan de praat.
Sorry dat het nu een enorme post wordt, maar ik heb even geen serverruimte om het op te knallen. Dit is mijn script tot nu toe:
<html>
<head>
<title>Drop-Down Menu</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// 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;
// -->
</script>
</head>
<body>
<h1> </h1>
<ul id="sddm">
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">HOME</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">NIEUWS</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">BLOG</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">DISCOGRAFIE</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">AGENDA</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">MEDIA</a>
<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<li><a href="#">FOTO'S</a></li>
<li><a href="#">INTERVIEWS</a></li>
<li><a href="#">VIDEO'S</a></li>
</div>
</li>
<li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">DRUMKIT</a>
<div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m8')" onmouseout="mclosetime()">LINKS</a>
<div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m9')" onmouseout="mclosetime()">CONTACT</a>
<div id="m9" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>
<p>
</body>
</html>
En de css:
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 0 px 0 0;
padding: 4px 10px;
width: 70px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
Hopelijk kan iemand van jullie me verder helpen, want ik zit echt f helemaal vast. Thx!!!!!
Ik wil een horizontaal menu met daaronder een dropdown die ook horizontaal is. En dat is nou juist het probleem. In Firefox werkt ie redelijk, maar in IE krijg ik het maar niet aan de praat.
Sorry dat het nu een enorme post wordt, maar ik heb even geen serverruimte om het op te knallen. Dit is mijn script tot nu toe:
<html>
<head>
<title>Drop-Down Menu</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// 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;
// -->
</script>
</head>
<body>
<h1> </h1>
<ul id="sddm">
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">HOME</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">NIEUWS</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">BLOG</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">DISCOGRAFIE</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">AGENDA</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">MEDIA</a>
<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<li><a href="#">FOTO'S</a></li>
<li><a href="#">INTERVIEWS</a></li>
<li><a href="#">VIDEO'S</a></li>
</div>
</li>
<li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">DRUMKIT</a>
<div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m8')" onmouseout="mclosetime()">LINKS</a>
<div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m9')" onmouseout="mclosetime()">CONTACT</a>
<div id="m9" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>
<p>
</body>
</html>
En de css:
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 0 px 0 0;
padding: 4px 10px;
width: 70px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
Hopelijk kan iemand van jullie me verder helpen, want ik zit echt f helemaal vast. Thx!!!!!
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
Dit topic is gesloten.