Menu not working? [Archive] - CodingForums.com

Wardy118

03-05-2007, 11:30 AM

I'm trying to put together a menu which you can see here http://www.geocities.com/virtuallydesigned/menutry.html. In firefox the menu works fine but in IE the hoover dropdown options don't work.

Where am i going wrong? code is below:

Thanks :thumbsup:

<html>
<head>

<title>Untitled</title>
<style>

#menu {list-style-type:none; margin:272px 0 100px 140px; padding:0;font-family:arial,helvitica,sans-serif;}
#menu li {float:left;padding:0; margin:0 1px 0 0; position:relative; width:232px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:18px;}
#menu dl {width: 232px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 30px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

#menu .one {background: #AAAAAA; border-top:5px solid #D4D4D4;}
#menu .two {background: #0B47E6; border-top:5px solid #7EA0FA;}
#menu .three {background: #5C87F8; border-top:5px solid #BECFFC;}

#menu .one dt {background: #E4E4E4;}
#menu .two dt {background: #356AF7;}
#menu .three dt {background: #7499FA;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu dd.last {border-bottom:1px solid #fff;}

#menu dt a, #menu dt a:visited {display:block; color:#444;}

#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:190px;}

#menu .one dd a {background:#356AF7; color:#eee;}
#menu .two dd a {background:#7499FA; color:#eee;}
#menu .three dd a {background:#E4E4E4; color:#000000;}

#menu .one dd a:hover {background: #E4E4E4; color:#000000;}
#menu .two dd a:hover {background: #356AF7; color:#000000;}
#menu .three dd a:hover {background: #7499FA; color:#FFFFFF;}

</style>

</head>

<body>

<ul id="menu">
<li>

<dl class="one">
<dt><a href="#nogo">ABOUT</a></dt>
<dd><a href="#nogo" title="What I Do">What I do</a></dd>
<dd><a href="#nogo" title="My history">History</a></dd>
<dd><a href="#nogo" title="My prices">Prices</a></dd>
<dd><a href="#nogo" title="Site Map">Site map</a></dd>
<dd><a href="#nogo" title="Website accessibilty">Accessibility</a></dd>
<dd><a href="#nogo" title="Privacy">Privacy</a></dd>
<dd><a href="#nogo" title="Copyright">Copyright</a></dd>
</dl>

</li>
<li>

<dl class="two">
<dt><a href="#nogo">MY PORTFOLIO</a></dt>
<dd><a href="#nogo" title="GoingGoingGone Portfolio">GoingGoingGone</a></dd>
<dd><a href="#nogo" title="Priory Wanderers Football Club portfolio">Priory Wanderers FC</a></dd>
<dd><a href="#nogo" title="Motors 4 U portfolio">Motors 4 U</a></dd>
</dl>


</li>
<li>

<dl class="three">
<dt><a href="#nogo">CONTACT Us</a></dt>
<dd><a href="#nogo" title="My email address">Email</a></dd>
<dd><a href="#nogo" title="My phone details">Phone</a></dd>
<dd><a href="#nogo" title="Postal address">Post</a></dd>

</dl>


</li>
</ul>

</body>
</html>

jlhaslip

03-05-2007, 11:47 AM

According to cssplay.co.uk (where it looks like the menu was derived from), you require a valid Doctype Declaration.
The Geocities account does not include one which is effective, (and neither does the code you posted),resulting in the menu not functioning properly.
Run your page through the w3c validator to learn more. validator here (http://validator.w3.org/)

ronaldb66

03-05-2007, 02:44 PM

Also, IE doesn't support the :hover speudoclass on anything but links. To add this functionality you can explore Sons of Suckerfish (http://www.htmldog.com/articles/suckerfish/).

Wardy118

03-05-2007, 04:07 PM

Hi thanks for your replies.

I'm very new to coding especially JavaScript which is why i'm playing around with bits and pieces to try and help me learn. I have read through the link you supplied ronald, but don't understand alot of it. I have added the JavaScript to my menu but it doesn't seem to effect it at all. Not to sure where i need to put the javascript or if i need to add something to it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Untitled</title>

<script type="text/javascript">

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

<style>

#menu {list-style-type:none; margin:272px 0 100px 140px; padding:0;font-family:arial,helvitica,sans-serif;}
#menu li {float:left;padding:0; margin:0 1px 0 0; position:relative; width:232px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd, li.sfhover {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:18px;}
#menu dl {width: 232px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 30px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

#menu .one {background: #AAAAAA; border-top:5px solid #D4D4D4;}
#menu .two {background: #0B47E6; border-top:5px solid #7EA0FA;}
#menu .three {background: #5C87F8; border-top:5px solid #BECFFC;}

#menu .one dt {background: #E4E4E4;}
#menu .two dt {background: #356AF7;}
#menu .three dt {background: #7499FA;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu dd.last {border-bottom:1px solid #fff;}

#menu dt a, #menu dt a:visited {display:block; color:#444;}

#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:190px;}

#menu .one dd a {background:#356AF7; color:#eee;}
#menu .two dd a {background:#7499FA; color:#eee;}
#menu .three dd a {background:#E4E4E4; color:#000000;}

#menu .one dd a:hover {background: #E4E4E4; color:#000000;}
#menu .two dd a:hover {background: #356AF7; color:#000000;}
#menu .three dd a:hover {background: #7499FA; color:#FFFFFF;}

</style>

</head>

<body>

<ul id="menu">
<li>

<dl class="one">
<dt><a href="#nogo">ABOUT</a></dt>
<dd><a href="#nogo" title="What I Do">What I do</a></dd>
<dd><a href="#nogo" title="My history">History</a></dd>
<dd><a href="#nogo" title="My prices">Prices</a></dd>
<dd><a href="#nogo" title="Site Map">Site map</a></dd>
<dd><a href="#nogo" title="Website accessibilty">Accessibility</a></dd>
<dd><a href="#nogo" title="Privacy">Privacy</a></dd>
<dd><a href="#nogo" title="Copyright">Copyright</a></dd>
</dl>

</li>
<li>

<dl class="two">
<dt><a href="#nogo">MY PORTFOLIO</a></dt>
<dd><a href="#nogo" title="GoingGoingGone Portfolio">GoingGoingGone</a></dd>
<dd><a href="#nogo" title="Priory Wanderers Football Club portfolio">Priory Wanderers FC</a></dd>
<dd><a href="#nogo" title="Motors 4 U portfolio">Motors 4 U</a></dd>
</dl>


</li>
<li>

<dl class="three">
<dt><a href="#nogo">CONTACT Us</a></dt>
<dd><a href="#nogo" title="My email address">Email</a></dd>
<dd><a href="#nogo" title="My phone details">Phone</a></dd>
<dd><a href="#nogo" title="Postal address">Post</a></dd>

</dl>


</li>
</ul>

</body>
</html>