CSS Dop Down List Problem

dthomas31uk

Feb 24th 2005, 2:07 am

Hi, Have encountered a problem with my drop down list menu. Works fine in Firefox and IE6, but does not work in Netscape 7 and IE5MAC.

Here is the code hope someone can help

Cheers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Heraldic Pottery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Hp.css" rel="stylesheet" type="text/css">
<style type="text/css">

#vertnav {
WIDTH: 122px; LIST-STYLE-TYPE: none
}
#vertnav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#vertnav LI {
DISPLAY: block; LEFT: 0px; MARGIN-BOTTOM: 0px; WIDTH: 130px; BORDER-BOTTOM: 0px; POSITION: relative; BACKGROUND-COLOR: #515033
}
#vertnav A {
PADDING-RIGHT: 1px; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; FONT: 13px verdana; BORDER-LEFT: #ffffff 1px solid; WIDTH: 150px; COLOR: white; PADDING-TOP: 1px; BACKGROUND-COLOR: #515033; TEXT-ALIGN: left; TEXT-DECORATION: none
}
#vertnav A:hover {
COLOR: #cccccc; BACKGROUND-COLOR: #beb968
}
#vertnav UL {
DISPLAY: none; LEFT: 152px; POSITION: absolute; TOP: 0px
}
#vertnav LI:hover UL {
DISPLAY: block
}
#vertnav UL LI:hover UL {
DISPLAY: block
}
HTML #vertnav LI {
FLOAT: left; HEIGHT: 2%
}

</style>

<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>

</head>

<body>

<ul id="vertnav">
<div align="left"></div>
<li><a href="index.htm">Home</a></li>
<div align="left"></div>
<li><a href="Profile.htm">Profile</a></li>
<div align="left"></div>
<li><a href="Mugs1.htm">Mug Shapes</a></li>
<li> <a href="#">Processes</a>
<ul>
<li><a href="Design.htm">Design</a></li>
<li><a href="Printing.htm">Printing</a> </li>
<li><a href="Decorating.htm">Decorating</a> </li>
<li><a href="Despatch.htm">Despatch</a></li>
<li><a href="MailOrder.htm">Mail Order</a></li>
</ul>
</li>
<li><a href="Contact.htm">Contact</a></li>
<li><a href="Products.htm">Products</a></li>
<li><a href="openstock.htm">Open Stock/Retail</a></li>
</ul>

</div>

</body>
</html>

branduin

Feb 25th 2005, 10:42 am

Hi,

I don't have a solution for you as I don't have Netscape on this PC but I wanted to mention that when I view the menu in Firefox the boxes shorten and I am only able to view the top half of each word. In IE6 it looks fine and they are the correct height to fit each line/word. Might just be my machine but I wanted to let you know!

SEbasic

Feb 25th 2005, 11:38 am

I don't have time to look at that, but I can reccomend this solution.
http://www.alistapart.com/articles/horizdropdowns/

It should work, it's a good script.

Also, my advice would be to forget ie5 on the mac...

carowan

Feb 25th 2005, 2:35 pm

I don't have time to look at that, but I can reccomend this solution.
http://www.alistapart.com/articles/horizdropdowns/

It should work, it's a good script.

Also, my advice would be to forget ie5 on the mac...

I can attest to the ALA article, I took SE basics advice a few months ago, and used the ALA code on my site.

I also found http://www.htmldog.com (run by one of the authors of the ALA article) has the updated version of the menus, both vertical and horizontal.

This is my first CSS project and I (incredibly) didnt have any problems using it at all.