Forum Moderators: not2easy
The problem I am having is with my CSS drop down menu list which appears on the left of the screen. When using Netscape 7 and IE5 Mac the menu list does not appear properly.
The vertnav tag is the css for the drop down list that I am having trouble with. Does anyone have any suggestions
Here is the link. <No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
Cheers
[code added]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Vertical Nav Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type=text/javascript>
activateMenu = function(vertnav) {
/* currentStyle restricts the Javascript to IE only */
if (document.all && document.getElementById(vertnav).currentStyle) {
var navroot = document.getElementById(vertnav);
/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
/* If the LI has another menu level */
if(lis[i].lastChild.tagName=="UL"){
/* assign the function to the LI */
lis[i].onmouseover=function() {
/* display the inner menu */
this.lastChild.style.display="block";
}
lis[i].onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
}
window.onload= function(){
/* pass the function the id of the top level UL */
/* remove one, when only using one menu */
activateMenu('vertnav');
}
</script>
<link href="Test.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
body {background: #ccc;}
UL {PADDING: 0px; MARGIN: 0px; LIST-STYLE-TYPE: none;}
#vertnav {WIDTH: 122px;}
#vertnav UL {
PADDING: 0px;
MARGIN: 0px;
LINE-HEIGHT: 1;
}
#vertnav LI {
position: relative;
DISPLAY: block;
WIDTH: 130px;
BACKGROUND-COLOR: #515033;
}
#vertnav A {
padding: 1px;
BORDER-TOP: 1px solid #fff;
BORDER-LEFT: 1px solid #fff;
DISPLAY: block;
FONT: 13px verdana;
COLOR: white;
BACKGROUND-COLOR: #515033;
TEXT-ALIGN: left;
TEXT-DECORATION: none;
WIDTH: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 148px;
}
* html #vertnav A {
\width: 150px;
w\idth: 150px;
}
#vertnav A:hover {COLOR: #cccccc; BACKGROUND-COLOR: #beb968; }
#vertnav UL {
DISPLAY: none;
POSITION: absolute;
LEFT: 152px;
TOP: 0px
}
#vertnav LI:hover UL {DISPLAY: block}
#vertnav UL LI:hover UL {DISPLAY: block}
</style>
<!--[if gte IE 6]>
<style type="text/CSS">
html #vertnav LI { float: left; height: 2% }
</style>
<![endif]-->
</head>
<body>
<table summary="">
<td width="151" height="197" valign="top" align="left">
<ul id="vertnav">
<div align="left"></div>
<li><a href="#">Home</a></li>
<div align="left"></div>
<li><a href="#">Shapes</a></li>
<li> <a href="#">Processes</a>
<ul>
<li><a href="#">Printing</a> </li>
<li><a href="#">Decorating</a> </li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
[edited by: SuzyUK at 10:46 am (utc) on Feb. 27, 2005]
I made some edits to the above code while summarising it (see CSS Troubleshooting refresher [webmasterworld.com] for some links to further guidelines on posting code).
I'm not seeing any problems in NN7 (don't have Mac to Test).. so I might have inadvertently changed something that was there.. can you confirm whether the "problem! is still evident or did you fix it already ;)
Then, and someone else may be able to help more here, cos I don't know, the comments within the javascript are CSS comments, this may be affecting the script, anyone?
Suzy
