hello. I created the following dropdown menu by cobbling together the <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.htmldog.com/articles/suckerfish/example/" target="_new">suckerfish dropdown menu</a> & an ordered list rollover css I found. I then managed to get it to work as a horizontal menu on firefox & safari, but no luck on IE 5 for mac or IE6 for PC. Can anyone take a look and see if they can find the problem? the CSS & JS is pasted below.
<!-- m --><a class="postlink" href="http://www.happyconsumer.com/ehughes/cabinets.html">http://www.happyconsumer.com/ehughes/cabinets.html</a><!-- m -->
CSS file:
/* page structure */
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
height: 530px;
\height: 550px;
h\eight: 530px;
border: 0px;
margin: 0px;
margin-bottom: 0px;
background-image: url("images/pagestructure/background.gif");
background-repeat: no-repeat;
padding: 0px;
}
#header {
width: 760px;
\width: 780px;
w\idth: 760px;
height: 66px;
\height: 86px;
h\eight: 66px;
padding: 0px;
margin-bottom: 0px;
position:relative;
}
#content {
width: 706px;
\width: 726px;
w\idth: 706px;
height: 415px;
\height: 435px;
h\eight: 415px;
padding: 0px;
margin-bottom: 0px;
position:relative;
left: 36px;
top: 0px;
clear: left;
}
#splash {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 0px;
margin: 0px;
margin-bottom: 0px;
background-image: url("images/photos/splash_photo.jpg");
background-repeat: no-repeat;
padding: 0px;
}
#footer {
width: 760px;
\width: 780px;
w\idth: 760px;
padding: 0px;
margin-bottom: 0px;
position:relative;
}
/* drop-down menu */
#nav {
display: inline;
overflow: hidden;
height: 66px;
width: 719px;
}
ul
{
padding: 0;
margin: 0;
list-style: none;
width: 719px;
\width: 739px;
w\idth: 719px;
}
li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
float: left;
position: relative;
background-color: white;
}
ul li {
position: relative;
}
li ul {
display: none;
position: absolute;
top: 33px;
left: 0;
border-color: #CCC;
border-width: 1px 0px 1px 0px;
border-style: solid;
}
li>ul {
top: 33px;
left: -391px;
}
li:hover ul, li.over ul {
display: block;
}
#nav a {
float: left;
padding: 33px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:33px; /* for IE5/Win */
}
#nav a:hover {
background-position: 0 -33px;
}
#nav a:active, #nav a.selected {
background-position: 0 -33px;
}
#furniture a {
width: 192px;
height: 33px;
background: url(images/pagestructure/n_selected_furniture_both.gif) top left no-repeat;
}
#bookcases a {
width: 94px;
height: 33px;
background: url(images/pagestructure/n_bookcases_both.gif) top left no-repeat;
}
#bureaus a {
width: 149px;
height: 33px;
background: url(images/pagestructure/n_bureaus_both.gif) top left no-repeat;
}
#cabinets a {
width: 99px;
height: 33px;
background: url(images/pagestructure/n_cabinets_both.gif) top left no-repeat;
}
#deskstables a {
width: 77px;
height: 33px;
background: url(images/pagestructure/n_deskstables_both.gif) top left no-repeat;
}
#ladders a {
width: 77px;
height: 33px;
background: url(images/pagestructure/n_ladders_both.gif) top left no-repeat;
}
#mirrors a {
width: 75px;
height: 33px;
background: url(images/pagestructure/n_mirrors_both.gif) top left no-repeat;
}
#stands a {
width: 88px;
height: 33px;
background: url(images/pagestructure/n_stands_both.gif) top left no-repeat;
}
#stools a {
width: 59px;
height: 33px;
background: url(images/pagestructure/n_stools_both.gif) top left no-repeat;
}
/* text styles */
a.caption:link {
color: #000000;
text-decoration: underline
}
a.caption:visited {
color: #000000;
text-decoration: underline
}
a.caption:hover {
color: #364F6A;
text-decoration: underline
}
.caption {
color: #333333;
font-family: verdana, sans-serif;
font-size:10px;
line-height: 12px;
}
a.enter:link {
color: #000000;
text-decoration: none
}
a.enter:visited {
color: #000000;
text-decoration: none
}
a.enter:hover {
color: #959085;
text-decoration: underline
}
.enter {
color: #000000;
font-family: verdana, sans-serif;
font-size:11px;
line-height: 13px;
}
.copyright {
color: #7F7B72;
font-family: verdana, sans-serif;
font-size:9px;
line-height: 12px;
}
JS file:
// drop-down IE fix<!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
<!-- m --><a class="postlink" href="http://www.happyconsumer.com/ehughes/cabinets.html">http://www.happyconsumer.com/ehughes/cabinets.html</a><!-- m -->
CSS file:
/* page structure */
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
height: 530px;
\height: 550px;
h\eight: 530px;
border: 0px;
margin: 0px;
margin-bottom: 0px;
background-image: url("images/pagestructure/background.gif");
background-repeat: no-repeat;
padding: 0px;
}
#header {
width: 760px;
\width: 780px;
w\idth: 760px;
height: 66px;
\height: 86px;
h\eight: 66px;
padding: 0px;
margin-bottom: 0px;
position:relative;
}
#content {
width: 706px;
\width: 726px;
w\idth: 706px;
height: 415px;
\height: 435px;
h\eight: 415px;
padding: 0px;
margin-bottom: 0px;
position:relative;
left: 36px;
top: 0px;
clear: left;
}
#splash {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 0px;
margin: 0px;
margin-bottom: 0px;
background-image: url("images/photos/splash_photo.jpg");
background-repeat: no-repeat;
padding: 0px;
}
#footer {
width: 760px;
\width: 780px;
w\idth: 760px;
padding: 0px;
margin-bottom: 0px;
position:relative;
}
/* drop-down menu */
#nav {
display: inline;
overflow: hidden;
height: 66px;
width: 719px;
}
ul
{
padding: 0;
margin: 0;
list-style: none;
width: 719px;
\width: 739px;
w\idth: 719px;
}
li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
float: left;
position: relative;
background-color: white;
}
ul li {
position: relative;
}
li ul {
display: none;
position: absolute;
top: 33px;
left: 0;
border-color: #CCC;
border-width: 1px 0px 1px 0px;
border-style: solid;
}
li>ul {
top: 33px;
left: -391px;
}
li:hover ul, li.over ul {
display: block;
}
#nav a {
float: left;
padding: 33px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:33px; /* for IE5/Win */
}
#nav a:hover {
background-position: 0 -33px;
}
#nav a:active, #nav a.selected {
background-position: 0 -33px;
}
#furniture a {
width: 192px;
height: 33px;
background: url(images/pagestructure/n_selected_furniture_both.gif) top left no-repeat;
}
#bookcases a {
width: 94px;
height: 33px;
background: url(images/pagestructure/n_bookcases_both.gif) top left no-repeat;
}
#bureaus a {
width: 149px;
height: 33px;
background: url(images/pagestructure/n_bureaus_both.gif) top left no-repeat;
}
#cabinets a {
width: 99px;
height: 33px;
background: url(images/pagestructure/n_cabinets_both.gif) top left no-repeat;
}
#deskstables a {
width: 77px;
height: 33px;
background: url(images/pagestructure/n_deskstables_both.gif) top left no-repeat;
}
#ladders a {
width: 77px;
height: 33px;
background: url(images/pagestructure/n_ladders_both.gif) top left no-repeat;
}
#mirrors a {
width: 75px;
height: 33px;
background: url(images/pagestructure/n_mirrors_both.gif) top left no-repeat;
}
#stands a {
width: 88px;
height: 33px;
background: url(images/pagestructure/n_stands_both.gif) top left no-repeat;
}
#stools a {
width: 59px;
height: 33px;
background: url(images/pagestructure/n_stools_both.gif) top left no-repeat;
}
/* text styles */
a.caption:link {
color: #000000;
text-decoration: underline
}
a.caption:visited {
color: #000000;
text-decoration: underline
}
a.caption:hover {
color: #364F6A;
text-decoration: underline
}
.caption {
color: #333333;
font-family: verdana, sans-serif;
font-size:10px;
line-height: 12px;
}
a.enter:link {
color: #000000;
text-decoration: none
}
a.enter:visited {
color: #000000;
text-decoration: none
}
a.enter:hover {
color: #959085;
text-decoration: underline
}
.enter {
color: #000000;
font-family: verdana, sans-serif;
font-size:11px;
line-height: 13px;
}
.copyright {
color: #7F7B72;
font-family: verdana, sans-serif;
font-size:9px;
line-height: 12px;
}
JS file:
// drop-down IE fix<!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>