No replies
tiggertrance
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2006-12-17
Posts: 5
Points: 0

http://www.mawson.com/street/courses.html

The link above is my test page I'm working on. My rollovers are workin fine in IE6 and FireFox. It figures that with the new MS browser stuff stops working.

The problem is that the rollovers seem very fussy. For example: I have drop down on Courses & RiderCoaches. If you go to Couses the drop down show up, but when you move the mouse over to select the drop down it disapears. Can anyone help.

CSS
* { margin: 0; padding: 0; }

html, body { height: 100%; }

body { font-family: "Times New Roman", Times, serif; font-size: 101%; background-image: url(images/background.gif); background-attachment: fixed;}

#container { font-size: 1em; background-color: #fff; margin-right: auto; margin-left: auto; min-height: 100%; width: 800px; text-align: left;}

#header {border-bottom: #000 solid 1px; text-align: center; padding: .3em .3em;}

#content { margin-left: 8em; padding: 0 1em 2em .5em; }

/* SIDEBAR MENU STARTS HERE */
#sidebar { float: left; width: 120px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 85%; color: #333; }
#sidebar ul { list-style: none; margin: 0; padding: 0; border: none; }
#sidebar ul li { border-bottom: 2px solid #8EC1DF; margin: 0; position: relative; }
#sidebar ul li a { display: block; padding: 5px 5px 5px 8px; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; }
#sidebar ul li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
/* END SIDEBAR MENU */

/* SIDEBAR SUB MENU STARTS HERE */
#sidebar li ul { position: absolute; left: 119px; top: 0; display: none; }
#sidebar li ul li { border-bottom: 0; margin: 0; text-align: right;}
#sidebar li ul li a { display: block; padding: 5px 5px 5px 8px; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; color: #fff; text-decoration: none; width: 100%; }
#sidebar li:hover ul, #sidebar li.over ul {
display: block; }
/* END SIDEBAR SUB MENU */

/* CONTENT FORMATTING */
p { padding: .5em 0 0em 0;}
h2 { font-style: italic; padding: 0; font-size: 1em; font-weight: normal; }
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .9em; text-decoration: underline; padding: .5em 0 .6em 0}
.header_image { padding: 0 0 .1em 0; text-align: left;}
/* END CONTENT FORMATTING */

/* IE HACK */
* html #container {height: 100%;}
* html #sidebar{ /*IE 6 only */ width: 93px; /*Box model bug: 180px minus all left and right paddings for #sidebar */ }
* html #sidebar li ul {width: 45px; left: 125px;}
html>body #sidebar li a{ /*Non IE6 width*/ width: auto; }

/* Fix IE. Hide from IE Mac \*/
* html #sidebar ul li { float: left; }
* html #sidebar ul li a { height: 1%; }
/* End */

/* Fix IE. Hide from IE Mac \*/
* html #sidebar ul li { float: left; height: 1%; }
* html #sidebar ul li a { height: 1%; }

Java Script:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i